随 着 互联 网 的 迅速 友 展 和 各 类 电 商 平台 的 不 断 规 范 、 完 善 ， 网 购 用 户 越 来 越 多 。 众 所 周知 ， 淘 宇和 天 猫 是 各 类 电 商 平台 中 的 
斥 楚 ， 然 而 这 两 大 平台 的 迅猛 友 展 导致 的 商品 同 计 化 、 价 格 透 明 化 ， 意 味 着 卖家 要 想 提高 客流 量 和 转化 率 ， 已 经 不 能 再 像 过 去 屠 
样 大 打 价 格 战 ， 除 了 要 在 营销 、 推 广 等 方面 下 工夫 外 ， 网 店 的 六 和 修 ， 也 就 是 网 店 的 美工 与 广告 设计 成 为 男 一 个 重要 的 着 力 点 。 


本 书 即 以 帮助 淘宝 天 猫 卖 家 做 好 网 店 兴修 为 出 友 点 ， 以 Photoshop 为 软件 工具 ,结合 大 量 精美 实例 ， 全 面 而 系统 地 讲解 了 
网 店 美工 与 广告 设计 的 重点 知识 与 拉 能 。 
内 容 结 构 

全 书 分 为 2 个 部 分 。 


第 1 部 分 为 网 店 半 修 的 理论 精华 和 图 像 处理 基 本 技法 ， 包 括 网 店 委 修 基础 知识、Photoshop 快 速 上 手 、 网 店 图 像 的 快速 调 
整 、 商 品 照 片 的 修复 与 修饰 、 商 品 影 调 的 调控 、 商 品 照片 的 调 色 、 文 字 与 图 形 的 应 用 、 商 品 的 抠 取 与 合成 等 内 容 。 


第 2 部 分 则 以 实例 的 形式 讲解 网 店 装修 中 各 类 核心 区 域 的 设计 ， 包 括 主 图 与 直通 车 图 片 、 店 招 、 导 航 条 、 欢 迎 模块 与 促销 广 
告 、 分 类 导航 、 商 品 细 书 描述、 优惠 券 与 收藏 区 、 客 服 区 等 ， 并 在 最 后 通过 3 个 店铺 准 修 典型 案例 对 前 面 所 学 进行 综合 应 用 。 


编写 特色 


` 内 容 全 面 : 全 书 从 网 店 装修 的 基础 知识 和 基本 技能 入 手 ， 针 对 修 图 、 抠 图 、 调 色 与 合成 等 重要 技法 进行 讲解 ， 并 通过 典型 


下 
实例 进行 活 学 活用 。 从 没 接 触 过 网 上 开店 或 网 店 装修 的 读者 无 需 借助 其 他 书籍 就 能 轻松 入 门 。 


- 案例 精美 : 书 中 选取 大 量 精美 的 商品 照片 进行 处 理 ， 通 过 详细 的 操作 步骤 、 简 洁 美 观 的 版 面 设计 ， 让 读者 能 够 轻松 阅读 ， 
提升 学 习 兴 趣 。 随 书 附 赠 的 学 习 资 源 还 包含 所 有 案例 的 源 文 件 ， 读 者 可 以 在 实际 工作 中 直接 套用 。 


“ 设计 理念 : 对 网 店 装 修 中 的 几 大 核心 区 域 设计 进行 讲解 时 ， 还 对 案例 的 设计 思路 、 配 色 方 案 、 版 式 布局 、 技 术 要 点 等 进行 


分 析 和 介绍 ， 引 导读 者 深入 思考 案例 背后 的 设计 理念 ， 从 而 能 够 举一反三 ， 快 速 掌握 网 店 装 修 的 精 获 。 
. 技巧 提示 : 技巧 是 知识 的 精华 ， 本 书 中 穿 播 了 大 量 技巧 提示 ， 能 有 效 地 帮助 读者 理解 知识 难点 、 提 高 工作 效率 。 
读者 对 象 


本 书 适 合 初 次 开店 想 目 己 妆 修 店铺 的 读者 阅读 ， 而 已 能 独立 进行 网 店 疼 修 或 正在 从 事 网 店 妆 修 工作 的 读者 也 可 以 通过 本 书 学 
习 更 多 布局 、 配 色 方 面 的 知识 。 
改版 说 明 

本 书目 2016 年 5 月 以 全 彩印 刷 方式 首次 面市 后 ， 收 获 了 诸多 好 评 。 本 次 改版 修订 了 书 中 的 跑 漏 ， 并 以 更 加 起 值 的 黑 日 印刷 方 
式 出 版 ,希望 能 够 满足 更 多 读者 的 学 习 需 求 。 


由 于 作者 水 平 有 限 ， 在 编写 本 书 的 过 程 中 难免 有 不 足 乙 处 ， 朋 请 广大 读者 指正 批评 ， 除 了 扫 摘 二 维 码 添加 订阅 号 获取 资讯 以 
外 ， 也 可 加 入 QQ 和 群 134392156 与 我 们 交流 。 


作者 
2017 年 3 月 


本 书 作者 张 子 太 ， 任 职 四 川 筑 梦 电子 商务 有 限 公司 设计 总 监 ， 硕 士 研究 生 学 历 ， 融 级 数字 艺术 设计 师 。 主 要 研究 方向 为 数字 
艺术 、 互 动 媒 体 、 用 户 体验 和 电子 商务 等 ， 已 参与 设计 项 目 五 十 余 项 ， 发 表 和 出 版 过 多 部 论文 、 著 作 。 本 书 受 四 川 筑 梦 电子 商务 
有 限 公司 、 内 江 筑 梦 教 育 咨 询 有 限 公司 联合 科研 资助 基金 项 目 (项 目 编号 ;: ZM201517) 资助 出 版 。 


pt Pll = DA A 
如 何 获取 云 空 间 资 料 
步骤 1 : 扫描 天 注 微 信 公众 号 
在 手机 微 信 的 “发 现 ” 页 面 中 点 击 “ 扫 一 扫 ” 功 能 ， 如 左下 图 所 示 ， 页 面 立即 切换 至 “二 维 码 /条 码 ” 界 面 ， 将 手机 对 准 右 
下 图 中 的 二 维 码 ， 即 可 扫 摘 天 注 我 们 的 微 信 公众 号 。 


4 邮 。 朋友 图 


人 后 一 手 


和 KK 附近 的 人 


步骤 2: 获取 人 资 料 下 载 地址 和 密码 

关注 公众 号 后 ， 回 复 本 书 书号 的 后 6 位 数字 “567356”， 公 众 号 就 会 自动 友 送 云 空 间 资 料 的 下 载 地 址 和 相应 密码 。 
步骤 3: 打开 人 深 料 下 载 页面 

万 法 1: 在 计算 机 的 网 页 浏览 器 地 址 栏 中 输入 获取 的 下 载 地 址 (输入 时 注意 区 分 大 小 写 ) ， 按 Enter 键 即 可 打开 资料 下 载 页 
面 。 


方法 2: 在 计算 机 的 网 页 浏览 器 地 址 栏 中 输入 “wx.qq.com”， 按 Enter 键 后 打开 微 信 和 网 页 版 的 登录 界面 。 按 照 登录 界面 的 
操作 提示 ， 使 用 手机 微 信 的 “ 扫 一 扫 ” 功 能 扫描 登录 界面 中 的 二 维 码 ， 然 后 在 手机 微 信 中 点 击 “ 登 录 ” 按 钮 ， 浏 览 器 中 将 自动 登 
录 微 信和 网 页 版 。 在 微 信和 网 页 版 中 单 击 左 上 角 的 “阅读 ”按钮 ， 如 右 图 所 示 ， 然 后 在 下 方 的 消息 列表 中 找到 并 单 击 刚才 公众 号 发 送 
的 消息 ， 在 右 侧 便 可 看 到 下 载 地 址 和 相应 密码 。 将 下 载 地 址 复制 、 粘 贴 到 网 页 浏览 器 的 地 址 栏 中 ， 按 Enter 键 即 可 打开 资料 下 载 


在 资料 下 载 页 面 的 “请 输入 提取 密码 : ”下 方 的 文本 框 中 输入 下 载 地 址 附 审 的 密码 (输入 时 注意 区 分 大 小 写 ) ， 再 单 击 “ 提 
取 文 件 ” 按 钮 ， 在 新 打开 的 页 面 中 单 击 右上 角 的 “下 载 ”按钮 ， 在 弹出 的 菜单 中 选择 “普通 下 载 ”选项 ， 即 可 将 云 空间 资料 下 载 
到 计算 机 中 。 下 载 的 资料 如 为 压 绾 包 ， 可 使 用 7-Zip、WinRAR 等 解压 软件 解压 。 


本 次 活动 新 品 Bj 梧 有限， 亲 们 抓紧 里 哦 ! 
全 场 甸 邮 疆 权 | 相 赠 


15 日 -8 月 16 日 


可 可 知 已 
佳能 数码 相 # 以 以 从 习 
点 ep, ep 及 时 区 了 此 训 的 坊 岂 早已 建 包 
下 CE 4 家 3 来 总 宁 玛 起 愧 于 清 由 虞 虞 地 揣 过 
2 攻 、 rt ed es -十 二 和 二- 法 白 从 让 起 不 地 触 模 的 攻 疗 花 
"=> ， 本 未 知 是 在 怎 证 的 一 个 计 间 时 
3 樟 丰 欧 意 很 方 瞪 床 眼 香 来 请 民 健 让 7 


静 知 的 的 其 的 妥 的 的 的 的 


静 所 地 时 很 天 了 胸 习 动 气 币 
的 描 绕 只 项 空中 愤 物 息 邢 


/ ¥:3790 


立即 抢购 


简单 来 况 ， 网 店 妆 修 是 捐 对 店铺 页 面 进行 美化 和 委 饰 ， 这 是 提高 网 店 转化 率 的 有 效 途 径 。 人 在 进行 网 店 委 修 之 前 ， 诈 移 需 要 驹 
道 为 什么 要 进行 网 店 妆 修 、 网 店 委 修 的 组 成 要 素 有 哪些 、 如 何 定位 网 店 的 妆 修 风格 等 各 识 ， 这 样 才能 更 轻松 局 效 地 完成 网 店 委 修 
设计 工作 。 下 面 束 来 一 一 讲解 上 述 网 店 装修 的 重要 基础 知识 ， 为 后 面 学 习 有 具体 的 装修 设计 操作 打 好 基础 。 


01 ”网 店 冯 修 的 必要 性 

02 ”网 店 装修 设计 的 组 成 要 素 

03 ”网 店 北 修 中 不 同 元 素 的 尺寸 设计 

04 ”网 店 妆 修 中 文字 、 图 片 、 色 彩 与 版 面 的 搭配 
05 ”确定 网 店 委 修 设计 风格 


06 常见 的 网 店 准 修 设计 误区 


01 网 店 委 修 的 必要 性 


与 传统 实体 店 的 消费 方式 不 同 ， 网 购 主 要 通过 图 片 与 点 击 人 交互 的 操作 方式 来 完成 商品 的 交易 ， 所 以 当 消 费 者 只 能 通过 图 片 
一 一 也 残 是 视 吕 角度 去 了 解 商品 时 ， 做 好 网 店 半 修 ， 让 视 竞 富 销 去 触 上 友 消 费 者 的 购买 冲动 ， 是 提高 网 店 商品 点 击 率 和 销量 的 最 
关键 的 步骤 。 视 党 营销 可 以 说 是 营销 的 一 种 技术 ， 即 通过 视 党 设计 对 视 完 元 素 进行 合理 编排 ,将 视 党 体验 转换 为 购买 力 ， 达 到 促 
进 消 费 的 目的 。 


当 消 费 者 进入 一 个 网 店 后 ， 最 终 是 否 会 购买 这 个 店铺 中 的 商品 是 受到 很 多 因素 影响 的 ， 如 商品 质量 是 否 有 保证 、 后 期 服务 怎 
么 样 、 商 品 是 否 实 用 等 ， 而 这 些 问 题 大 多 可 以 通过 网 店 装修 来 解决 。 从 视觉 营销 的 角度 来 看 ， 网 店 装修 是 让 商品 变 得 足够 吸引 人 
的 关键 ,只 有 把 图 片 处 理 得 美美 的 ， 才 能 更 好 地 抓 住 消费 者 的 视线 ， 激 友 消 费 者 的 点 击 欲 望 ， 达 到 良好 的 视 完 营销 效果 。 


决定 消费 者 能 否 下 单 的 因素 


几 枉 


或 淋 半 还 
也 条 股 洒 
: 

半 深 只 


下 辆 缉 可 
瀑 技 外 谋 避 
闷 斌 习 许 吉 

涝 哇 缉 可 

妾 志 洒 这 

NE 

下 尽 


网 店 沪 修 的 目的 是 让 店铺 页 面 变 得 更 加 漂亮 、 更 有 设计 感 ， 以 便 吸引 消费 者 。 需 要 注意 的 是 ， 好 的 视 党 营销 固然 需要 漂亮 的 
图 片 ， 但 是 漂 腕 的 图 片 却 不 完全 等 同 于 好 的 视觉 写 销 。 网 店 和 修 更 注重 的 是 将 所 售 产品 的 相 天 信息 准确 地 传递 出 来 。 例 如 ， 有 一 
款 新 品 准备 上 架 ， 要 想得到 更 多 的 关注 ， 那 么 新 品 上 架 的 广告 制作 、 商 品 图 片 的 修饰 、 商 品 详情 页 的 制作 都 是 网 店 沪 修 的 过 程 ， 
只 有 运用 图 片 和 文字 等 元 素 把 商品 的 整体 形态 、 材 质 细节 、 价 格 优势 等 信息 表现 出 来 ， 才 能 在 无 形 之 中 为 店铺 增加 天 注 度 。 


优质 头 层 牛 皮 


下 于 圭 忆 地 局 六 丑 苞 划 这 
画 击 下 醒 机 ， 航 本 于 是 本 
本 后 司 村 本 四 硬是 

让 更 本 近 上 乓 


以 右 图 为 例 ， 担 摄 出 来 的 照片 中 商品 没有 经 过 后 期 润色 与 修饰 ， 显 得 曼 无 生气 ， 这 样 的 图 片 是 很 难 激 起 顾客 的 兴趣 的 ; 
过 后 期 调整 与 修饰 之 后 ， 图 像 中 的 商品 变 得 更 加 精致、 美观 ， 将 这 样 的 图 像 应 用 于 网 店 中 ， 再 对 它 的 细 市 进行 分 解 介绍 ， 并 搭配 
文字 、 图 形 等 元 素 进 行 六 修 和 美化 ， 可 以 大 大 提高 商品 的 表现 力 ， 从 而 吸引 更 多 的 顾客 。 


02 ”网 店 委 修 设计 的 组 成 要 素 


网 店 妆 修 与 实体 店铺 疼 修 仔 在 很 大 区 别 ， 想 要 在 有 限 的 页 面 把 商品 的 各 个 方面 都 传递 给 顾客 显然 是 不 可 能 的 。 所 以 在 网 店 半 
修 过 程 中 ， 只 有 合理 地 安排 页面 中 的 元 素 ， 才 能 在 限定 的 空间 内 ， 尽 可 能 地 将 店铺 的 活动 和 商品 信息 最 大 限度 地 告知 顾客 。 


网 店 装修 的 页 面 不 一 定 要 做 得 特别 精美 、 高 端 ， 只 要 能 吸引 顾客 的 注意 ， 给 顾客 留 下 良好 的 印象 ， 就 能 在 一 定 程度 上 提高 店 
铺 的 点 击 率 和 商品 的 销量 。 网 店 装修 一 般 包 括 背 景 、 图 像 、 文 字 、 留 白 等 几 个 重要 组 成 要 素 ， 下 面 将 用 具体 的 图 像 来 展示 这 些 要 
素 的 设计 与 应 用 . 


图 像 


图 像 是 网 店 页 面 中 展示 商 
品 的 主要 区 域 ， 它 主要 指 
一 些 商 品 照片 、 模 特 展示 
照片 和 净 饰 画面 的 图 形 、 
符号 等 。 由 于 它们 本 喘 就 
包含 一 些 信息 ， 因 此 ,将 
这 些 图 像 进行 一 定 的 组 织 
和 编排 ， 就 能 营造 出 特定 
的 氛围 ， 直 观 地 表现 商品 


信息 。 


Den 
月 只 


至 景 是 网 店 页面 的 重要 
组 成 部 分 ， 需 要 根据 店 
铺 的 活动 、 商 品 特点 以 
及 要 表现 的 主题 风格 来 
选择 。 一 幅 好 的 背景 图 
不 但 可 以 让 画面 显得 更 
加 统一 ， 更 能 为 版 面 营 
造 独 特 的 氛围 ， 以 加 深 
顾客 对 店铺 的 印象 。 汇 
修 时 可 以 使 用 纯色 、 图 
案 、 图 像 等 充当 背景 。 


文字 是 为 辅助 图 像 而 存在 
的 ， 主 要 是 对 商品 信息 进 
行 补充 说 明 ， 它 的 设计 风 
格 由 商品 的 风格 所 决定 。 
在 一 个 页 面 中 ， 文 字 不 但 
可 以 用 于 传递 商品 信息 ， 
还 可 以 起 到 美化 版 面 的 作 
用 ， 使 设计 出 的 画面 更 加 
美观 。 


Es 

将 育 景 、 图 像 、 文 字 安 排 
好 以 后 ,余下 的 空白 部 分 
即 为 留 晶 区域 。 由 于 网 店 
页 面 中 已 经 包含 了 大 量 的 
图 片 、 文 字 信 息 ， 必 要 的 
留 日 可 以 让 页 面具 有 一 定 
的 节奏 感 和 前 律 感 。 


良好 的 布局 可 以 让 整个 页 面 更 有 观赏 性 ， 并 且 能 让 画面 中 的 信息 更 容易 被 顾客 所 了 解 和 接受 。 


进行 网 店 装修 之 前 ， 无 论 是 店铺 主页 的 设计 还 是 商品 详情 页 的 设计 ， 在 确定 页 面 的 整体 布局 后 ， 为 了 让 整个 设计 流程 更 加 流 
畅 ， 首 先 都 会 抓 住 版 面 中 较 大 的 一 块 ， 将 其 位 置 确定 下 来 ， 然 后 对 它 进行 细节 的 设计 ， 最 后 确定 画面 中 其 他 各 部 分 组 成 要 素 的 位 
置 和 信息 ， 通 过 合理 的 安排 将 商品 要 表现 的 信息 完整 地 传递 出 来 。 对 网 店 进行 痕 修 时 ， 需 要 根据 委 修 风格 对 画面 进行 规划 ， 切 记 
不 要 乐 拼 西 次 ， 人 否则 容易 导致 妆 修 出 来 的 页 面 中 的 元 素 显得 杂乱 ， 不 利于 商品 的 展示 。 


03 ”网 店 装修 中 不 同 元 素 的 尺 十 设计 


网 店 装修 最 关键 的 两 个 页 面 束 是 首页 和 商品 详情 员 ， 首 页 决定 了 顾客 对 店铺 的 第 一 印象 ,商品 详 情 页 决定 顾客 是 人 否 会 对 商品 
产生 购买 欲望 。 


知道 网 店 委 修 的 两 个 主要 页 面 后 ， 还 需要 了 解 这 两 个 页 面 由 哪些 模块 组 成 。 网 店 首 页 中 需要 半 修 的 区 域 包括 店 招 、 导 舰 、 客 
服 、 收 藏 区 等 内 容 ， 商 品 详情 页 中 则 包括 橱窗 照 、 商 品 的 分 类 、 商 品 细节 摘 述 等 。 


店 招 与 导航 
同窗 由 
欢迎 模块 
分 类 导航 侧 边栏 包括 价 
格 信息 ,客服 、 
5 品 分 类 、 搜 
索 等 
热卖 专区 
商品 详情 页 包 
括 服 务 承诺 
i i 品 描述 、 实 
ce 物 展示 、 设 计 
客服 及 收藏 


表面 介绍 了 网 店 首 页 和 详情 页 的 组 成 模块 ， 下 面 融 来 了 解 这 些 模块 的 尺寸 要 求 。 为 了 让 顾客 得 到 最 佳 的 浏 贞 体验， 网 店 中 对 
不 同 模块 的 图 片 尺寸 有 着 不 同 的 要 求 ， 如 下 表 所 示 。 


尺寸 图 片 尺寸 


500 像 素 X500 像 素 宽度 750 像 素 以 内 ， 高 度 不 限 
950 像 素 X150 像 素 310 像 素 X310 像 素 
950 像 素 X50 像素 宽度 750 像 素 以 内 ， 高 度 不 限 


宽度 150 像 素 以 内 ， 高 度 不 限 “ | 左 侧 模块 (收藏 模块 ) | 宽度 190 像 素 以 内 ， 高 度 不 限 


宽度 950 像 素 以 内 ， 高 度 不 限 公告 栏 宽度 480 像 素 以 内 ， 高 度 不 限 
16 像 素 X 16 像 素 右 侧 模块 宽度 750 像 素 以 内 ， 高 度 不 限 


反 巧 提示 : 设置 网 店 委 修 设计 图 的 太 寸 大 小 


虽然 网 店 装 修 中 各 个 区 域 对 图 睫 的 尺寸 大 小 有 所 限制 ， 但 是 在 具体 的 装修 过 程 中 ， 为 了 便于 查看 和 处 理 图 像 ， 在 处 理 图 廊 


时 ， 可 以 按 比例 适当 放大 设计 图 的 尺寸 ， 在 制作 完成 后 再 将 图 片 存储 为 限定 的 大 小 和 格式 即 可 。 


04 ”网 店 委 修 中 文子、 图片 、 色 彩 与 和 版面 的 搭配 


由 于 半 修 一 个 店铺 会 运用 到 大 量 的 图 片 、 文 字 等 信息 ， 所 以 进行 网 店 半 修 设计 前 ， 首 移 需 要 掌握 一 些 网 店 闭 修 中 的 图 像 、 文 
字 、 配 色 与 版 面 搭 配方 案 ， 这 样 才能 更 加 流畅 和 快速 地 设计 出 更 多 的 网 店 装修 作品 。 


党 用 配色 方案 


进入 一 个 网 店 ， 首 先 影 响 人 们 观感 的 瓯 是 页 面 中 的 色彩 ， 由 此 可 见 色彩 对 于 网 店 半 修 的 重要 性 。 正 确 运 用 色彩 之 间 的 差异 对 
比 才 能 产生 相应 的 效果 ， 在 网 店 闭 修 设计 中 ， 常 用 的 色彩 搭配 万 案 有 色相 对 比 配 色 、 明 度 对 比 配 色 、 纯 度 对 比 配色 等 。 
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上 图 利用 了 色相 对 比 的 配色 方案 ， 将 两 种 以 上 的 色彩 放 在 一 起 ， 由 于 色彩 相互 乙 间 的 郑 异 而 产生 了 醒目 的 效果 。 采 用 这 样 的 


配色 方案 不 仪 使 画面 显得 更 有 生机 ， 而 且 能 够 表现 出 丰 申 的 层次 感 。 


直面 下痢 本 下 是 本 
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上 图 利用 了 纯度 对 比 配色 方案 组 织 画面 ， 低 纯度 的 黑色 、 灰 色 等 作为 文字 和 背景 色彩 ， 将 其 与 纯度 不 同 的 红色 搭配 ， 使 得 画 
面 中 要 突出 展示 的 商品 更 加 醒目 。 


在 网 店 半 修 中 ， 元 素 的 层次 感 与 空间 天 系 大 多 以 色彩 的 明度 对 比 来 体现 。 右 图 残 及 用 了 明太 差异 对 比 的 配色 方案 ， 利 用 不 同 
明度 的 黄 褐 色 处 理 画 面 中 不 同 区 域 的 色彩 ， 相 近 颜 色 之 间 的 颜色 变化 区 域 并 不 大 ， 这 样 的 画面 能 够 给 人 和 谐 、 目 然 的 舒适 感 ， 用 
于 客服 区 装修 更 能 提升 顾客 的 信任 感 。 


6 : 售 前 服务 二 上 咨询 小 G 人 : 咨询 小 H 一 : 咨询 小 J 一 : 咨询 小 K 客服 在 线 时 间 
周一 ~ 周 四 ( 早 9.00-- 晚 21:00 ) 


6 : 人 后 服务 “全 : 咨询 小 F 外 : 咨询 ,中 Y ”人 :咨询 小 全 得 : 咨询 小 周 五 ~ 周 日 ( 早 8:30~ 晚 23:00 ) 


全 部 宝贝 7” ， 连 衣 福 “| 上 衣 | 亲子 装 | 活动 专区 as 签到 送礼 > 


图 形 与 文字 的 搭配 方案 


网 店 妆 修 中 ， 无 论 是 首页 还 是 商品 详情 页 ， 都 离 不 开 文 字 与 图 片 的 搭配 使 用 。 如 果 一 个 页 面 中 只 有 图 片 而 没有 文字 ， 顾 客 融 
不 知道 这 尝 图 片 要 表现 的 主要 内 容 是 什么 ;而 如 果 大 量 地 使 用 文字 ， 没 有 为 文字 配 图 ， 则 容易 让 顾客 在 阅读 的 时 候 产 生 疲 秀 感 ， 
而 且 完 全 无 法 感受 到 商品 的 实物 效果 。 人 在 网 店 装修 设计 中 ， 为 了 把 握 好 商品 图 片 与 文字 的 搭配 效果 ， 可 以 在 安排 图 片 与 文字 时 及 
用 左 文 右 图 、 左 图 右 文 、 上 文 下 图 、 上 图 下 文 等 不 同 的 搭配 方式 。 


将 文字 与 图 像 按 上 图 下 文 方式 搭配 ， 可 以 有 效 地 使 观 者 的 视 完 重心 藻 在 图 片上 ,使 人 感受 到 图 片 的 魅力 ， 而 文字 部 分 安静 地 
置 于 图 片 下 方 ， 给 人 更 为 理想 、 合 理 的 感觉 。 如 下 所 示 的 两 张 图 片 都 是 分 类 导航 图 ， 将 多 张 不 同 的 商品 照片 利用 统一 的 外 形 轮廓 
进行 调控 ， 让 顾客 一 眼 茂 知道 商品 的 类 别 划 分 ， 位 于 两 品 下 方 的 文字 则 对 商品 的 分 类 做 了 进一步 的 补充 说 明 ， 有 规律 的 排列 方式 


给 人 端正 、 规 整 的 感受 。 


正 保证 正品 闪电 发 货 
天 猪 品牌 商家 /正品 保证 受 货 速度 / 收 货 及 时 
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上 文 下 图 的 搭配 方式 就 是 将 文字 畦 于 图 像 的 上 方 ， 这 样 的 组 合 方式 同样 可 以 达到 简明 扼要 的 效果 。 如 右 图 所 示 ， 这 是 一 张 商 
品 促销 广告 图 片 ， 画 面 中 将 醒目 的 主题 文字 置 于 商品 图 像 上 万 ， 使 版 面 呈现 出 上 轻 下 重 的 视 竞 效 果 ， 从 而 市 给 人 稳重 感 。 


FL YCODO 和 


47 1 


时 间 : 10 月 1 日 一 10 月 7 日 


左 图 右 文 是 将 要 表现 的 商品 图 片 或 模特 图 像 置 于 版 面 的 左 侧 ， 而 文字 置 于 图 片 右 侧 ， 这 样 的 搭配 万 式 可 更 好 地 对 商品 进行 分 
析 和 和 说明， 如 下 左 图 所 示 ; 而 左 文 右 图 是 将 文字 畦 于 画面 左 侧 ， 图 片 置 于 画面 右 侧 ， 这 样 的 处 理 万 式 遵 从 了 顾客 从 左 至 右 的 阅读 
习惯 ,顾客 可 以 从 阅读 文字 开始 了 解 商 品 的 特征 或 卖点 等 信息 ， 如 下 右 图 所 示 。 


MM 
sg 
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SIZE 


网 店 委 修 版 面 布局 


好 的 版 面 布局 设计 能 够 更 快 、 更 准确 地 传达 信息 ， 是 提高 店铺 点 击 率 和 商品 销量 的 一 个 重要 因素 。 进 行 网 店 疼 修 时 ， 可 以 将 
商品 页 面 的 组 成 要 素 进 行 合 理 安排 ， 组 成 各 种 不 同 的 版 面 编排 形式 ， 以 此 来 体现 店铺 的 品位 ， 从 而 达到 吸引 顾客 的 目的 。 


网 店 的 版 面 布局 往往 具有 一 定 的 视 党 导向 性 ， 它 可 以 引导 顾客 完成 对 店铺 商品 的 浏览 ， 将 顾客 的 视线 集中 到 要 展示 的 商品 
上 。 虽 然 网 店 中 销售 的 商品 丰 申 多样， 但 是 仔细 观察 不 难 友 现 ， 目 前 网 店 委 修 的 布局 大 多 为 单 癌 型 版 面 布局 、3 曲 续 型 版 面 布局 
和 对 称 型 版 面 布 局 3 种 。 


单 癌 型 版 面 布局 是 最 为 普遍 的 页 面 布 局 方式 ， 一 般 分 为 水 平 排列 和 垂直 排列 两 种 。 奏 直 排列 的 单 同 型 版 面 布局 可 以 让 画面 产 
生 稳 定 感 ， 使 版 面条 理 更 为 清晰 ;而 水 平 排列 的 单 向 型 版 面 布 局 具有 更 强 的 条 理性 ， 也 更 符合 人 们 的 阅读 习惯 。 为 了 让 画面 更 丰 
宣 ， 往 往 会 将 水 平 排列 和 垂直 排列 的 布局 方式 结合 起 来 使 用 。 
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如 右 图 所 示 ， 在 网 店 准 修 中 ， 为 了 营造 一 种 曲折 和 寺 回 的 视觉 感受 ， 有 时 还 会 用 到 S 曲 线 型 版 面 布局 方式 ， 这 样 的 版 面 布 局 可 
以 让 画面 产生 一 定 的 韵律 感 ， 让 顾客 更 加 灵活 地 得 看 店铺 中 的 商品 ， 设 计 感 也 更 强 。 
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雹 届 的 可 科 日 抛 蜡 审 沿 = 请 本 + 本 件 邮 下 且 + 正夫 各 于 。 切 和 儿 量 5 训 杞 沸 用 ， 上 车 叶 襄 营 浊 有 性 何 忆 有 ， 嫩 陵 佬 天 需 洗 甲 永 ， 可 要 
本 对 片 岗 去 。 干 将 计 硬 、 力 革 、 主 此 下 二 有 训 旋 胃 ， 专 业 险 泣 韦 忆 出 局 由 十 摊 告 


上 图 是 为 录 店 铺设 计 的 首页 禾 修 效果 ， 从 整体 上 来 看 ， 画 面 采 用 了 和 奏 直 排列 的 布局 方式 ， 让 顾客 的 视线 随 痢 画面 的 下 移 而 友 
生 改 变 ， 同 时 ， 在 细节 的 处 理 上 又 采用 了 水 平 排列 的 布局 方式 ， 调 节 了 垂直 排列 布局 的 单调 感 ， 让 顾客 被 画 面 所 吸引 。 


对 称 型 版 面 布局 在 商品 详情 页 中 经 单 会 裤 用 到 ， 这 种 版 面 布局 可 以 保证 版 面 各 构成 元 素 之 间 的 平衡 感 ， 使 版 面具 有 统一 、 规 
整 的 视 锅 效果 ， 利 用 均衡 的 版 面 传递 信息 。 如 下 所 示 的 两 张 图 片 都 是 商品 详情 页 中 的 商品 卖点 展示 图 ， 其 中 左 图 以 中 间 的 商品 整 
体 效 果 为 基准 ， 将 商品 的 细节 元 素 以 放射 状 展开 ， 形 成 一 个 类 似 于 环 状 的 版 面 布 局 ， 昌 有 很 强 的 趣味 性 ， 给 人 以 欢快 的 感受 ， 与 
要 表现 的 商品 特点 非 单 吻合 ; 右 图 采用 了 左右 对 称 的 形式 进行 设计 ， 让 画面 中 商品 的 细节 得 到 了 更 直观 的 展示 。 


亮点 、 功效 ericHr SPOT 


D At 


近 创 感光 A i 
人 人潮 
| 
4 # 水 公 浊 出 > 
-你 ,0 


05 确定 网 店 妆 修 设计 风格 


网 店 的 委 修 风格 在 一 定 程度 上 会 影响 店铺 的 经 豆 。 定 位 准确 而 又 美观 大 方 的 委 修 风格 不 但 可 以 市 给 顾客 美好 的 视觉 感受 ， 更 
能 提升 店铺 品位 ， 吸 引 更 多 的 潜在 消费 者 ， 增 加 顾客 浏览 的 时 间 ， 从 而 达到 引导 并 促进 顾客 消费 的 目的 。 


虽然 现在 网 上 也 有 很 多 漂 腕 的 和 妆 修 模板 ， 但 是 并 不 是 对 每 个 店铺 都 适用 ， 如 果 选 择 的 委 修 模板 与 店铺 中 销售 的 商品 风格 不 
搭 ， 则 会 给 人 一 种 不 伦 不 类 的 感觉 。 所 以 ， 在 进行 网 店 委 修 乙 前 ， 需 要 根据 商品 的 特征 来 定义 于 修 的 风格 。 右 图 所 示 的 思维 导 图 
是 确定 网 店 妆 修 风格 的 思路 。 由 于 网 店 的 委 修 风格 主要 是 针对 店铺 中 所 销售 的 商品 特点 进行 定位 的 ， 而 所 谓 的 确定 店铺 风格 ， 残 
是 根据 所 销售 的 商品 及 对 整个 店铺 的 定位 来 将 头脑 中 的 思维 具象 化 。 所 以 在 进行 委 修 前 需要 收集 相 天 的 委 修 素材 ， 这 些 素 材 包括 
担 摄 的 商品 照片 、 用 于 妆 饰 页 面 的 图 形 等。 通过 对 素材 的 分 析 ， 了 解 店铺 中 所 有 商品 的 特点 ， 在 脑海 中 形成 一 个 初步 的 构思 ， 确 
定理 念 中 的 视 总 映射 、 物 化 映射 等 ， 并 将 这 些 映 射 根据 准备 好 的 素材 有 序 地 组 织 起 来 ， 融 可 得 到 有 效 而 统一 的 视觉 效果 。 


为 店铺 夹 修 硝 定 风 格 


确定 店铺 要 传达 的 理念 ， 如 复 
古 、 时 尚 等 


将 要 传达 的 理念 具象 化 


,人 


EA 念 中 的 视 蜗 映射 、 
理 映射 和 物化 映射 


确定 具体 形象 ， 组 织 素 材 


制作 有 效 、 统 一 的 视 完 效果 


网 店 的 溢 修 风格 主要 体现 在 店铺 的 整体 色彩 、 色 调 及 图 片 的 提 报 风格 上 ， 需 要 体现 店铺 的 灵魂 。 一 个 好 的 溢 修 风格 的 呈现 并 
不 仅仅 依靠 卖家 或 设计 人 员 个 人 的 品位 ， 它 需要 一 个 系统 的 方法 ， 如 下 图 所 示 。 为 了 让 设计 的 店铺 委 修 风格 更 具 符 色 ， 可 以 多 观 
察 同类 店铺 的 闪 修 风格 ,并 从 中 学 习 和 提炼 关键 点 ， 以 打造 出 更 加 新 疾 、 更 有 创意 的 店铺 兴修 风格 。 


搜索 
EA ZN 要 
关键 词 衍生 关键 词 收集 素材 图 片 分 析 图 片 a 色彩 
脑 视觉 映 身 
风 视觉 映射 ee 质感 
心理 映射 视觉 风格 


物化 映射 


随 看 网 购 大 摆 赵 来 越 壮大 ， 网 购 商品 也 更 加 丰富 多 样 ， 包 括 服 半 、 鞋 吕 、 箱 包 、 美 妆 、 食 品 、 珠 至 、 百 货 等 诸多 大 类 ， 如 右 
图 所 示 。 不 同类 别 商 品 的 店铺 在 妆 修 风格 上 也 走 来 越 多 样 化 。 设 计 痢 需要 通过 解读 商品 特点 、 风 格 确定 其 店铺 的 整体 妆 修 风格 ， 
再 利用 提供 的 商品 照片 ， 通 过 页 面 的 布局 、 配 色 等 方式 ， 把 商品 的 特征 、 价 值 突 显 出 来 ， 达 到 吸引 顾客 购买 商品 的 目的 。 不 同 的 
店铺 销售 的 商品 不 同 ， 所 以 在 对 商品 进行 包 半 和 设计 的 时 候 希 要 呈现 的 效果 也 各 有 不 同 。 目 前 网 店 音 见 的 妆 修 风格 包括 清新 唯美 
风格 、 经 典 复 训 风格 、 炫 酷 时 尚 风格 、 清 爽 风格 等 ， 下 面 几 幅 图 片 分 别 展示 了 几 种 不 同 风格 的 委 修 效果 ， 通 过 对 比 可 以 友 现 ， 这 
些 图 片 在 元 素 搭配 和 整体 配色 上 都 采用 了 不 同 的 表现 方式 ， 用 各 目的 风格 树立 目 身 的 店铺 形象 。 


运动 己 外 


N\ 7 特色 购物 
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润 宝 女人 润 宝 
回 j:: 拍卖 会 ”全球 购 
批 点 量 巾 。” 润 宝 钦 
中 国 质 和 淘 女 妇 企 : 


Fr ope 各 志 
下 LY 一 
时 尚 前 行 
HAPPY GO ON 


~ 


个 人 人 
少 A nim 
IA I 
4 1 
2 4 200 元 优惠 办 吕 。500 元 借 阳 办 
查看 也 且 由 >> — 、 rope 
本 本 二 樟 各 可 针 驴 而 看 丰 要 > 
旺 日 新 局 
tra tr 
» 
沁 口 石 其 机 芒 
i 


一 


时 然 网 店 的 和 妆 修 风格 是 由 店铺 销售 的 商品 的 特点 决定 的 ， 但 它 并 不 是 一 成 不 变 的 ， 有 时 候 为 了 达到 某 种 特定 的 促销 效果 ， 可 
以 适当 更 改 店铺 的 装修 风格 。 以 左 图 为 例 ， 网 店 根据 销售 的 数码 商品 的 特征 将 画面 整体 风格 设置 为 优雅 的 监 色 调 ， 而 在 “ 双 十 
一 ”活动 时 ， 为 了 泻 染 出 更 为 强烈 的 活动 氛围 ， 设 计 人 员 在 画面 中 应 用 了 大 量 的 红色 调 ， 加 强 了 活动 的 宣传 力 和 表现 力 ， 画 面 变 


得 更 加 具有 吸引 力 。 


HappyY Mew Year 
了 =eerarensme 二 


Tt 


察 ， 总 结 


形 色 色 的 店铺 妆 修 ， 应 当 仔 细 观 察 ， 总 结 
委 修 过 程 中 单 见 的 误区 。 


> 人 大和 全、 
公告 栏 等 诸 


图 片 是 人 们 认识 、 了 解 商 品 的 重要 途径 ， 因 此 一 些 店家 为 了 让 顾客 了 解 更 多 的 商品 信息 ， 在 店铺 的 店 招 、 导 航 、 
多 区 域 全 部 放 上 了 图 片 ， 而 且 其 中 还 用 了 不 少 大 图 。 这 样 虽然 让 画面 变 得 充实 了 ， 但 是 页 面 加 载 速 度 会 变 得 很 慢 ， 甚 至 可 能 半天 


入 和 伟 
都 看 不 到 图 ， 导 致 顾客 失去 等 待 的 耐心 ， 造 成 流量 的 浸 费 。 


网 店 沪 修 过 程 中 切记 不 能 将 页 面 布 局 设计 得 过 于 复杂 ， 不 要 把 店铺 设计 成 门 尸 类 网 站 的 风格 ， 而 是 要 更 多 地 考虑 顾客 的 使 用 


感受 ， 页 面 布局 应 当 简 单 明 了 。 过 于 复杂 或 不 合理 的 布局 只 会 让 顾客 免得 眼花 综 配 。 合 理 的 六 修 布局 只 需要 让 顾客 进入 店铺 后 ， 
能 够 快速 地 找到 自己 所 想 要 的 商品 信息 ， 并 且 浏 并 到 商品 的 详细 特征 即 可 。 


配色 搭配 太 多 ， 男 面 太 凌 乱 


合理 的 色彩 搭配 可 以 增加 店铺 的 点 击 率 ， 但 并 不 是 说 要 把 店铺 的 色彩 搭配 得 五 彩 缤 纷 。 网 店 装 修 的 头 色 不 能 太 丰 富 ， 要 统一 
且 有 一 个 固定 的 配色 万 案 ， 对 颜色 进行 规 学 ， 即 在 一 个 版 面 中 只 需要 一 个 或 两 个 较为 醒目 、 裔 丽 的 色彩 ， 减 少 视 党 垃圾 ， 让 内 容 
显得 更 有 条 理 。 忆 的 来 说 ， 色 彩 的 搭配 原则 殊 是 “ 忆 体 协调 ， 局 部 对 比 ”.。 


过 多 地 使 用 模特 图 片 


为 了 让 顾客 直观 地 感受 商品 的 真实 效果 ， 很 多 网 店 在 装修 的 过 程 中 都 会 用 模特 图 片 来 进行 商品 的 展示 ， 但 是 过 多 地 使 用 模特 
图 片 会 让 页 面 中 的 信息 过 载 ， 给 顾客 造成 信息 重复 
意 信息 表现 的 节奏 ， 以 获得 最 佳 的 画面 效果 。 


大 量 运 用 闪 图 


内 图 束 是 通过 动画 方式 显示 的 图 片 。 沪 修 店铺 的 时 候 要 适度 使 用 内 图 ， 因 为 内 图 非常 耗费 计算 机 空间 ， 如 果 顾 客 的 计算 机 本 
置 不 是 很 好 ， 进 入 店铺 融会 使 计算 机 运行 变 慢 、 等 待 时 间 过 长 ， 最 终 市 给 顾客 不 好 的 购物 体验 。 


添加 不 合理 的 水 印 


一 些 卖家 为 了 节约 开店 成 本 ， 会 次 用 其 他 店铺 的 商品 图 片 用 于 商品 的 展示 ， 为 了 避免 这 种 情况 的 出 现 ， 有 些 卖家 会 在 商品 图 
片上 添加 个 性 化 水 印 。 但 是 ， 在 设计 水 印 的 时 候 ， 需 要 考虑 水 印 图 像 的 位 置 、 大 小 ， 切 记 不 能 喧 宾 村主 ， 影 响 商 品 的 展示 。 由 于 
网 店 中 商品 图 片 的 尺寸 有 限 ， 一 般 情 况 下 水 印 的 宽度 要 在 150 像 素 以 内 ， 高 度 在 50 像 素 以 内 ， 既 不 能 太 大 ， 也 不 能 太 小 。 


读书 笔记 


第 1 章 “Photoshop 快 速 上 手 


NEW FASHION/2015 泳 装 上 新 
IE [ 
寸 启 1 5 全 场 满 就 送 全 场 最 低 价 全 场 淘 金币 全 场 疯狂 购 
全 场 狂 送 | 秒杀 极限 低 币 抵 折扣 同 峰 七 惠 


傅 188 使 用 满 488 使 用 


首页 。 所 有 分 类 ”向 性 懒 人 套 鸭 专区 ”索尼 徽 音 专区 70D/700D 专 区 ”5D2/5D3/6D 专 区 


单反 数码 相机 


传 感 强 以 及 EXPEED 2 贺 像 处 理 器 
支持 高 清新 拍 报 ， 色 彩 胡 达 丰 富 
*3878。 


Photoshop 是 Adobe 公 司 研 帮 的 平面 图 像 处 理 软件 ， 主 要 用 于 对 图 像 进行 加 工 处 理 及 添加 特殊 效果 ， 是 专业 设计 人 员 的 首 
选 软件 之 一 ， 也 是 目前 很 多 网 店 美工 人 员 最 为 常用 的 图 像 编辑 与 设计 软件 。 在 网 店 装修 过 程 中 ， 经 常会 使 用 Photoshop 对 拍摄 
的 商品 照片 进行 一 些 简 单 的 处 理工 作 ， 如 新 建 与 打开 图 像 、 查 看 商品 照片 细节 、 网 店 装 修 图 像 的 存储 与 导出 等 。 本 章 将 对 这 些 基 
础 的 Photoshop 功 能 进行 简单 的 讲解 。 


01 网 店 妆 修 图 像 的 新 建 与 打开 

02 将 担 摄 的 商品 图 像 置 入 指定 位 置 
03 为 商品 添加 简单 的 注释 信息 

04 显示 并 查看 和 商品 的 细节 

05 ”选择 不 同 的 排列 方式 以 查看 丙 品 效果 
06 商品 图 像 的 快速 缩放 与 查看 

07 更 改 屏 幕 模式 显示 更 多 的 商品 内 容 


08 ”将 编辑 后 的 商品 图 像 存 储 于 指定 位 置 


实例 01 网 店 委 修 图 像 的 新 建 与 打开 


新 建文 件 是 网 店 装修 设计 的 一 项 基础 操作 ， 无 论 是 店 招 、 导 航 、 欢 迎 模块 还 是 收藏 区 的 设计 ， 都 是 在 新 建文 件 的 基础 上 完成 


的 。 因 此 在 学 习 网 店 北 修 前 ， 首 先 要 学 习 如 何 快速 创建 一 个 符合 网 店 兴修 条 件 的 图 像 文 件 。 在 Photoshop 中 新 建文 件 可 以 通 


"新建 ” 菜 早 命令 进行 。 


el 


NEW FASHION/2015 泳 区 上 新 


时 尚 无 界 


泰 材 随 书 资源 \ 泰 材 \01\01.psd 
源 文件 随 书 资源 \ 源 文件 \0 仆 网 店 装修 图 像 的 新 建 与 打开 .psd 


步骤 01 执行 “新建” 菜单 命令 


执行 “文件 > 新 建 ”菜单 命令 ,打开 “新 建 ” 对 话 框 ， 在 对 话 框 中 会 自动 以 “未 标题 -1” 命 名 新 建 的 文件 。 


EE 编辑 (日 ”图 像 四 ”图 层 (L】 文字 (Y) 选择 (9) 


名 称 [N): 未 标题 -1 
误 档 类 型 : | 前 贴 板 取消 


地 (O). , Ctrl+ 口 
在 Bridge 中 浏览 (B)... Akt+Ctrl+O 
打开 为 -- Alt+Shift+Ctrl+O 
打开 为 智 酚 对 得 .… 
最 二 打开 文件 [T) 


Sh 和 A 人 大 以 上 OD. 


步骤 02 指定 新 建文 件 的 背景 颜色 


为 了 便于 区 分 网 店 委 修 模 块 ， 可 以 在 “名 称 ” 文 本 框 中 输入 新 的 文件 名 称 。 


十 ,还 可 以 通过 “新 建 ” 对 话 框 中 的 “背景 内 容 ” 选 项 指定 图 像 的 


名 称 (N): | 天 猫 新 时 尚 


太 小 : 


南 诬 [W): | 
襄 厦 (H): | 


分 罪 军 [RJ: 
而 色 杆 式 ， 


朋 录 内 诊 : 


高 诅 


颜色 加 丰 净 件 : 


|96.012 


存储 预 设 (5S)..… 
测 际 预 设 [D) 


| R68 着 色 # 


日 名 图 像 太 小 : 


390.2K 


| 工作 中 的 RGB: sRGB 1EC619.. =| 


像素 长 宽 比 : | 方形 分 素 =| 


本 < 三 三 让 


在 新 建文 件 时 ， 不 仅 可 以 根据 需要 设置 图 像 太 


背景 癌 色 。 单 击 “ 背 景 内 容 ” 石 侧 的 颜色 块 ， 打 开 “ 拾 色 器 
(新 建文 档 背 景 颜色 ) ”对 话 框 ， 在 对 话 框 中 重新 设置 文档 背景 颜色 。 设 置 好 后 单 击 “确定 ”按钮 返回“ 新 建 ” 对 话 框 。 


女 档 类 型 ; 自 定 = | , 


ee 
er 


宽度 (W): | 950 | | 像素 

高 度 (H): | 400 | | 像素 
分 辩 率 [R: | 72 | [ 像素/ 英寸。 | 
颜色 模式 : | RGB 颜色 ?| | 8 位 


背景 内 容 : | 透明 


衣 录 和 内容 : 


步骤 03 ”创建 新 文件 


单 击 “新 建 ” 对 话 框 中 的 “确定 ”按钮 ， 新 建文 件 ， 可 友 现 Photoshop 已 根据 上 一 步 设 置 的 育 景 内 容 为 新 建 的 图 像 填 元 了 


步骤 04 打开 并 复制 图 像 


执行 “文件 > 打开 ”菜单 命令 ,打开 “打开 ”对 话 框 ， 在 对 话 框 中 选择 素材 文件 01.psd， 单 击 “ 打 开 ” 按 钮 ， 即 可 打开 图 


像 。 选 中 所 有 图 层 ， 单 击 工具 箱 中 的 “移动 工具 ”按钮 ， 然 后 将 鼠标 移 
复制 图 像 后 ， 调 整 图 像 的 位 置 、 大 小 ， 完 成 店铺 委 修 模块 的 制作 。 
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至 需要 的 图 像 上 ， 按 下 妃 标 并 将 其 拖 忠 至 新 建 的 文件 中 。 


(GO > 


实例 02 ”将 提 报 的 商品 图 像 置 入 指定 位 置 


在 进行 网 店 闪 修 时 ， 常 常会 对 图 像 进 行 多 次 缩放 、 旋 转 等 变换 操作 ， 以 便 使 其 达到 理想 的 效果 。 如 果 将 图 像 直 接 复制 到 页 面 
中 ， 则 可 能 导致 图 像 在 变换 时 出 现 模 糊 的 情况 ， 这 时 最 好 的 方法 融 是 通过 置 入 的 方式 把 素材 照片 放 到 页 面 中 的 指定 位 置 。 置 入 时 
图 像 将 目 动 转换 为 智能 对 象 图 屋 ， 无 论 对 图 像 进 行 多 少 次 缩放 、 旋 转 等 变换 操作 ， 其 品质 都 不 会 下 降 。 


素 材 随 书 资源 \ 素 材 \01\02.psd、03.jpg 


随 书 资源 \ 源 文件 \01\ 将 拍摄 的 商品 
源 文 件 图 像 置 入 指定 位 置 .psd 


新 美 姿 专柜 正品 炫 亮 觅 让 / 腮 红 5.8g 


步骤 01 执行 “ 置 入 嵌入 的 智能 对 象 ”菜单 命令 
执行 “文件 > 打开 ”菜单 命令 ， 打 开 素 材 文件 02.psd， 然 后 执行 “文件 > 置 入 嵌入 的 智能 对 象 ” 菜 单 命令 。 


艾 件 ([F) 编 加 (图 侠 四 ”图 后 届 ) 允 字 VM) 
新 建 (N).. Ctrl+N 


打开 (O)... Ctrl+O 
在 Bndge 中 浏览 (B).. 下 此 +Ctr|+ 吕 
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关闭 (CO) Ctrl+W 
关闭 全 部 Alt+Ctrl+W 
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存储 为 (A).. shift+Ctrl+s 
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恢复 (V1 
导出 (E) 
生成 4 
在 Behance 上 共享 (Di.. 


搜索 Adobe Stock 
置信 谋 入 的 智能 对 浓 (L)... 


步骤 02 ”选择 要 置 入 的 图 像 


打开 “ 置 入 人 散 入 对象” 对 话 框 ， 在 对 话 框 中 选择 素材 文件 03jpg， 单 击 “ 置 入 ”按钮 。 


六 收藏 只 
辆 | 桌面 


晰 烟 过 痢 拭 正 功 屿 亮 国 上 寻 杀 杂 389 


步骤 03 ”调整 置 入 图 像 的 大 小 和 位 置 


默认 情况 下 ， 置 入 的 图 像 与 打开 图 像 的 营 度 相同 。 因 此 ， 为 了 让 整个 画面 显得 更 加 协调 ， 还 需要 对 置 入 图 像 的 大 小 、 位 置 进 
行 调整 。 将 刀 标 移 到 置 入 图 像 的 角 点 位 置 ， 当 指针 变 为 双 同 箭头 时 ， 单 击 并 拖 灸 鼠标， 调整 图 像 大 小 和 位 置 ， 完 成 后 按 Enter 
键 ， 完 成 图 像 的 置 入 操作 。 置 入 图 像 后 在 “图 层 ” 面 板 中 可 以 看 到 被 置 入 图 像 目 动 生成 了 一 个 智能 图 层 ， 且 以 置 入 文件 的 名 称 命 
名 。 


加 —— 3 
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新 姜 姿 专柜 正品 炉 亮 胭脂 / 甩 红 5.8g 


反 巧 提示 : 目 由 变换 置 入 的 图 像 


置 入 图 像 后 ， 会 在 图 像 边缘 产生 自由 交换 编辑 框 ， 按 下 Shift 键 的 同时 单 击 并 抱 息 日 由 变换 编辑 框 ， 可 以 进行 等 比例 缩放 ; 按 


下 Shift+Alt 组 合 键 可 以 向 自由 变换 编辑 框 的 中 心 等 比例 缩放 。 


实例 03 ”为 商品 湛 加 信里 的 注释 信息 


在 编辑 商品 照片 时 ， 为 了 保留 一 些 与 照片 相关 的 重要 信息 ， 如 作者 、 拍 摄 时间、 商品 特征 等 ， 可 以 在 照片 中 加 入 注释 信息 
首先 使 用 Photoshop 中 的 “注释 工具 ”为 照片 添加 注释 图 标 ， 然 后 结合 “注释 ”面板 对 相关 的 注释 信息 进行 设置 。 


束 材 随 书 资源 \ 素 材 \01\04.jpg 


随 书 资源 \ 源 文件 \01\ 为 商品 添加 


源 文 件 简单 的 注释 信息 ,psd 


步骤 01 打开 素材 文件 


执行 “文件 > 打开 ”菜单 命令 ,打开 “打开 ”对 话 框 ， 在 对 话 框 中 选择 素材 文件 04.jpg， 表 单 击 “ 打 开 ” 对 话 框 下 方 的 “ 打 
开 ” 按 钮 ， 可 以 看 到 这 是 一 张 为 灯具 拍摄 的 照片 。 


按 住 工具 箱 中 的 “吸管 工具 ”按钮 国 不 放 ， 在 弹出 的 隐藏 工具 中 单 击 “ 注 释 工 具 ” 按 钮 ， 将 和 鼠标 移 至 需要 添加 注释 信息 的 
位 置 并 单 击 ， 即 可 在 该 处 添加 一 个 注释 图 标 。 


多 Xf 3D 材质 吸管 工具 


将 颜色 取样 器 工具 
mm 标尺 工具 
图 注 料 工 县 
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步骤 03 在 “注释 ”面板 中 输入 注释 信息 


添加 注释 图 标 后 ， 接 下 来 束 是 注释 信息 的 录入 。 打 开 “ 注 释 ” 面 板 ， 在 该 面板 的 文本 框 中 输入 文本 ， 根 据 此 照片 的 特点 ， 这 
里 输入 “10 月 8 日 新 品 推荐 品 整体 展示 ”注释 信息 。 


10 月 8 日 新 品 推荐 一 商品 整体 展 寺 


扩 巧 提示 : “注释 工具 ”选项 栏 解析 


在 图 像 中 添加 注释 图 标 后 ， 会 显示 对 应 的 “注释 工具 ”选项 栏 。 其 中 ，“ 作 者 ”选项 用 于 输入 注释 者 的 姓名 或 注释 的 标 
题 ; “颜色 ”选项 用 于 设置 注释 图 标的 颜色 ， 默 认为 黄色 ， 单 击 色 块 可 以 打开 “ 拾 色 器 (注释 颜色 ) ”对 话 框 来 重新 设置 注释 图 


标的 颜色 ; 单 击 “ 清 除 全 部 ”按钮 ， 可 以 将 图 像 中 的 所 有 注释 删除 ; 单 击 “显示 或 隐藏 注释 面板 ”按钮 ， 可 以 对 “注释 ”面板 进 
行 显示 或 隐藏 。 


实例 04 ”显示 并 一 看 丙 品 的 细 证 


查看 商品 细节 是 网 店 装修 时 经 常会 遇 到 的 一 项 操作 ，Photoshop 中 可 以 运用 “导航 器 ”面板 或 “ 抓 手工 具 ” 快 速 查看 照片 
的 各 个 区 域 。 


| 素 材 随 书 资源 \ 素 材 \01\05.jpg 


步骤 01 放大 图 像 至 100% 


在 Photoshop 中 打开 素材 文件 05.jpg， 为 了 看 到 更 清晰 的 鞋子 细 证 ,执行 “视图 >100%” 菜 单 命令 ,将 图 像 放 大 至 100% 显 


个 \。 
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打印 尺寸 (DD) 


步骤 02 ”使 用 “导航 器 ”面板 移动 图 像 


执行 “窗口 > 导航 器 ”菜单 命令 ,打开 “导航 器 ”面板 ， 在 面板 中 会 以 实 线 框 提 示 当 前 图 像 窗 口中 显示 的 区 域 。 如 果 需 要 三 
看 商品 照片 的 其 他 区 域 ， 则 可 将 鼠标 移 至 “导航 器 ”面板 中 ， 当 指针 显示 为 抓 手 图 标 沁 时 ， 单 击 并 拖 暇 实 线 框 。 


步骤 03 ”使 用 “ 抓 手工 具 ” 移 动 图 像 


查看 商品 照片 的 不 同 区 域 时 ， 除 了 可 以 通过 “导航 器 ”面板 来 实现 外 ， 也 可 以 使 用 “ 抓 手 工具 ”来 完成 。 单 击 工 具 箱 中 
的 “ 抓 手 工具 ”按钮 好 ,将 鼠标 移 至 图 像 窗 口中 ， 此 时 指针 会 变 为 抓 手 图 标 汶 ， 单 击 并 拖 灸 鼠标 ， 即 可 移动 图 像 窗 口中 显示 的 
图 像 ， 同 时 “导航 器 ”面板 中 实 线 框 的 位 置 也 会 随 之 变化 。 


步骤 04 ” 按 屏 幕 大 小 缩放 图 像 


在 确定 图 像 效 果 后 ， 可 以 将 图 像 恢 复 到 适合 屏幕 大 小 ， 以 便 查看 整体 效果 。 执 行 “ 视 图 > 按 屏幕 大 小 缩放 ”菜单 命令 ,缩放 
图 像 。 
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实例 05 ”选择 不 同 的 排列 方式 以 查看 商品 效果 


在 Photoshop 中 打开 多 张 商品 照片 后 ， 如 果 需 要 同时 查看 这 些 打 开 的 图 像 ， 可 以 选择 Photoshop 提 供 的 多 窗口 排列 方式 来 
进行 图 像 的 查看 操作 ， 而 且 还 可 以 在 多 个 窗口 中 同时 调整 图 像 的 显示 区 域 。 


素 材 随 书 资源 \ 素 材 \01\06.jpg 一 09.jpg 


步骤 01 打开 多 张 照 片 


执行 “文件 > 打开 ”菜单 命令 , 打开“ 打开” 对话 框 ， 按 住 Ctrl 键 不 放 ， 选 中 素材 文件 06.jpg ~ 09.jpg， 再 单 击 “ 打 开 ” 按 
钮 ， 打 开 多 个 图 像 。 默 认 情况 下 ， 图 像 以 “将 所 有 内 容 合 并 a 到 选项 卡 中 ”排列 方式 显示 于 工作 界面 中 。 
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步骤 02 执行 “四 联 ”菜单 命令 


为 了 便于 同时 查看 多 张 照 片 效 果 ， 可 以 对 打开 图 像 的 排列 方式 进行 调整 。 执 行 “ 窗 口 > 排 列 ” 菜 单 命 令 ， 由 于 这 里 同时 打开 
了 44 张 饰品 照片 ， 因 此 在 弹出 的 级 联 菜 单 中 执行 “四 联 ” 菜 单 命令 ， 将 图 像 以 四 联 排列 万 式 显 示 。 
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为 “06JPG"” 新 建 密 口 (W) 


步骤 03 ”滚动 单个 窗口 图 像 


在 四 联 排列 方式 下 ， 可 以 友 现 主体 商品 被 训 挡 住 了 。 蛙 击 “ 抓 手工 具 ” 按 钮 ， 将 鼠标 移 至 左上 角 的 图 像 上 ， 当 指针 变 成 抓 手 
图 标 时 ， 单 击 并 拖 擅 鼠标 ， 移 动 并 查看 窗口 中 的 图 像 。 


步骤 04 ”滚动 所 有 窗口 图 像 


在 上 一 步 操作 中 ， 仅 对 其 中 一 个 窗口 的 图 像 进行 了 位 置 的 移动 。 如 果 需 要 同时 移动 并 查看 所有 窗口 的 图 像 ， 则 可 勾 选 “ 抓 手 
工具 ”选项 柱 中 的 “ 浴 动 所 有 窗口 ” 复 选 框 ， 然 后 在 图 像 中 单 击 并 拖 蝶 鼠标 ， 同 时 移动 并 查看 所 有 图 像 。 


Wr" 姑 才 所 有 窗口 100% 适合 屏幕 填充 屏幕 


i 让 村 : 100%™ 


实例 06 ”商品 图 像 的 快速 缩放 与 合 看 


网 店 妆 修 过 程 中 ， 通 过 缩放 可 以 更 全 面 地 了 解 图 像 的 整体 效果 。Photoshop 中 可 以 使 用 “缩放 工具 ”对 打开 的 图 像 进 行 目 


由 缩放 操作 ， 还 可 以 同时 缩放 多 个 窗口 中 的 图 像 。 下 面 简 单 介绍 图 像 的 快速 缩放 与 查看 。 


素 材 随 书 资 源 \ 素 材 \01\10.jpg 一 12.jpg 


步骤 01 调整 窗口 排列 万 式 


打开 素材 文件 10.jpg ~ 12jpg， 这 是 一 组 儿童 服饰 上 身 效果 图 。 执 行 “ 窗 口 > 排 列 > 三 联 堆积 ”菜单 命令 ， 调 整 窗 口 的 排列 
方式 ， 显 示 更 多 的 图 像 。 
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为 “11jpg” 新 建 窗 口 (W) 


步骤 02 放大 指定 窗口 中 的 图 像 


单 击 工具 箱 中 的 “缩放 工具 ”按钮 国 ， 在 显示 的 选项 栏 中 单 击 “ 放 大 ”按钮 国 ， 将 妃 标 移 至 图 像 上 ， 当 指针 变 为 放大 图 标 
时 ， 单 击 鼠 标 即 可 放大 显示 图 像 。 


步骤 03 ”放大 所 有 窗口 中 的 图 像 


如 果 需 要 同时 缩放 所有 窗口 中 的 图 像 ， 则 可 勾 选 “缩放 工具 ”选项 栏 中 的 “缩放 所 有 窗口 ” 复 选 框 ， 然 后 将 鼠标 移 全 任意 一 
个 窗口 中 ， 当 指针 变 为 放大 图 标 时 ， 单 击 鼠 标 即 可 同时 放大 所 有 窗口 中 的 图 像 。 


周 整 训 口 大 小 以 东 民 蜡 示 了 编 所 有 窗口 


步 又 04 ”缩小 所 有 窗口 中 的 图 像 


网 店 装修 过 程 中 不 但 需要 学 会 放大 显示 图 像 ， 还 需要 学 会 缩小 显示 图 像 。 单 击 “缩放 工具 ”选项 栏 中 的 “缩小 ”按钮 置 ， 将 
鼠标 移 全 图 像 上 ， 当 所 针 变 为 缩小 图 标 时 ， 单 击 鼠 标 即 可 缩小 窗口 中 显示 的 图 像 。 


实例 07 更改 屏 幕 模式 显示 更 多 的 商品 内 容 


Photoshop 中 提供 了 “标准 屏幕 模式 ”“ 市 有 菜单 栏 的 全 屏 模 式 ” 和 “全 屏 模 式 ”3 种 屏幕 显示 模式 。 在 调整 和 编辑 商品 图 
像 时 ， 可 以 在 这 3 种 屏幕 模式 下 自由 切换 ， 观 察 图 像 处 理 的 效果 。 
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素 材 ” 随 书 资源 \ 素 材 01\13.psd 


步骤 01 在 “标准 屏幕 模式 ”下 查看 图 像 


执行 “文件 > 打开 ”菜单 命令 ,打开 素材 文件 13.psd， 这 是 一 张 为 一 家 销售 数码 相机 的 店铺 设计 的 北 修 效果 图 。Photoshop 
默认 以 标准 屏幕 模式 显示 该 图 像 。 
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- 下 吕 | 册 敬 玄 丫 大 中 以 红 导 辕 示 月 晴 让 所 机 南口 ” 辣 峙 闻 所 人 人 基本 二 由 用 天 各 本 汪 


13.5ad Hi RE 


二 
日 


5o(z 吐 柚 专 宕 和 业 数 码 相机 藏 


玫 有 于 | 国 上 冯 者 填 宽 A TOT Eo RP BE Bs 


呈 | 
ET 


[ 一 玫 
Lm ed 赴 六 


a ee 
i ee 测 交 省 i 6718 二 


es 


So 
”= ' Ww 单 民 数 抬 机 刘 


CR 


站 Ash se 圳 中 重重 山 
回 四 移 于 


户 讲 国 丰 二 全 羽生 国 时 NA 上 记 ， 


全 1 

Ea 司 Ti i EE 
i: | 国 避 5 IE 
号 二 古寺 它 
= kk 商品 

k 枯 翌 玉 

, 六 引 币 

车 FF 曾 是 T 怀 高潮 


到 
在 . 而 关 . 习 着 


[ 
EE 


风口 7" 国 ' 


步骤 02 切换 至 “ 带 有 菜单 栏 的 全 屏 模式 ” 


为 了 更 好 地 查看 图 像 效 果 ， 可 以 在 Photoshop 中 调整 屏幕 显示 模式 。 单 击 工具 箱 底部 的 “更 改 屏 幕 模式 ”按钮 国 ， 在 弹出 
的 隐藏 工具 中 单 击 “ 市 有 菜单 栏 的 全 屏 模 式 ”按钮 ， 将 屏幕 模式 切换 至 “市 有 菜单 栏 的 全 屏 模 式 ”。 


二 高 帮 布 ] 玉 量 是 本 0。 国 司 中 交 守 中 久 闻 T 3 证 四 [WII 下 了 [中 
b+ 。 是 目 二 达旦 届 了 二 二 RR 和 区 吕 司 至 客 主 坟 妨 是 秀和 村 区 | 
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步骤 03 ”切换 至 “全 屏 模 式 " 


如 果 需 要 隐藏 所 有 的 窗口 元 素 ， 则 单 击 “ 更 改 屏 幕 模式 ”按钮 图 ， 在 弹出 的 隐藏 工具 中 单 击 “ 全 屏 模 式 ”按钮 ， 即 可 以 全 
屏 模 式 显 示 图 像 。 


Pm 台 


9f71 时 到 专家 志 业 至 如 相机 藏 
cr ,Ci LM -一 区 


单反 数码 可 


由。 ”器 标准 屏幕 模式 
。 [加 | 带 有 菜单 栏 的 全 屏 模式 
转 全 屏 模式 


在 全 屏 模式 下 ， 按 下 键盘 中 的 H 键 即 可 选中 “ 抓 手工 具 ”， 此 时 通过 拖 暇 鼠标 可 以 查看 任意 区 域 中 的 图 像 效 果 。 
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实例 08 ”将 编辑 后 的 商品 图 像 仔 悄 于 指定 位 置 


完成 商品 照片 或 网 店 装修 图 片 的 制作 与 设计 后 ， 需 要 将 图 像 存储 到 指定 位 置 。 在 Photoshop 中 使 用 “和 存储 ”和 “存储 
为 ”命令 可 以 实现 图 像 的 快速 存储 。 


PSD 


素 材 随 书 资源 \ 素 材 0 八 14.psd 


A 老 二 随 书 资源 \ 源 文件 \01\ 将 编辑 后 的 
.a Ne be de 


ud NM 源 文 件 商品 图 像 储存 于 指定 的 位 置 一 一 
符 编 二 后 的 商品 图 像 存储 于 措 定位 置 构 编 辑 后 的 商品 图 像 存储 于 指定 位 置 /a : oi ~ ， 
Sn 0 | 促销 广告 .tif 


ns 


步骤 01 执行 “文件 存储 为 ”菜单 命令 


打开 素材 文件 14.psd， 这 是 已 完成 的 商品 促销 广告 图 片 。 为 了 便于 管理 图 像 ， 可 以 将 图 像 重 新 存储 于 指定 位 置 ， 执 行 “ 文 
件 > 存储 为 ” 菜 蛙 命令 ,打开 “另存 为 ”对 话 框 。 


新 建 IN).. Ctrl+ N 
打开 ( 口 )..。 Ctrl+ 口 
在 Bridge 中 浏览 (B)... Alt+Ctrl+O 
打开 为 .- Alt+Shift+Ctrl+O 
打开 为 暂 能 对 得..… 

最 近 打 开 文 件 (T) 


关闭 ( 口 Ctrl+Wy 
关闭 全 部 Alt+CtrltW 
关闭 并 转 到 Bridge.。 Shift+Ctd+W 
三 信 {5) Ctrl+s 


Shi 性 十 Ctrl 十 名 


步骤 02 ”设置 文件 名 和 保存 类 型 


为 便于 以 后 随时 更 改 图 像 ， 及 用 默认 的 Photoshop(*.PSD;*.PDD) 保 存 格式 ， 然 后 在 “文件 名 ”下 拉 列 表 框 中 输入 文件 
名 “将 担 摄 的 商品 图 像 置 入 到 指定 的 位 置 一 一 促销 广告 ”， 输 入 后 单 击 “ 保 仓 ” 按 钮 。 


(全 |) Creative Cloud * 
) Creative Cloud 
和 二 上 诊 拍 拔 的 商品 图 你 置信 到 指定 的 位 置 
至 库 却 土 胰 区 

图 视频 示 网 店 蓉 修 图 像 的 新 建 与 打开 

辟 图 片 曙 为 商品 图 你 添 扣 简单 的 注释 信息 

到 文档 
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汪 计算 机 
电 本 地 辜 盘 (C:) 
EB [TOOLS (0:) 
Es xy (E:) 
Ea 本 地 磁盘 (F:) 
, BETWILID i 


训 尾 名 [N}): 将 息 辑 后 的 商品 图 条 存储 于 指定 位 豆 


存储 : 站 | 作为 副本 (Y) 


; 主 各 [IN 


嘻 | 1CC 配置 文件 ( 口 : 


Alpha 通 让 IE) 
sRGB IEC61966-2.1 


品 | 图 屋 (L) 


弹出 “Photoshop 格 陈 选 项 ”对 话 框 ， 单 击 “ 确 定 ” 按 钮 ， 目 标 文 件 夹 中 残 会 显示 仔 储 的 图 像 。 


Photoshop 省 式 选 项 一 一 | 
IY| 最 太 兼 彰 (M) | 确定 | 
| 天 闭 “最 大 兼容 "可 能 会 丸 响 其 它 应 用 程序 或 其 他 版 本 胸 Photoshop sw | 
 ” 情 用 PSD 或 P56 文件 。 | 
单 击 “前 选项 ">" 妇 件 处 理 “> 文件 兼容 性 可 以 关闭 此 对 话 框 。 


格 盖 和 后 的 丙 后 车 他 存 导 ] 指正 必 香 


_|」 不 下 显示 


步骤 04 ”另存 为 TIFF 格 式 


将 图 像 存 储 为 PSD 格 式 后 ， 如 果 要 查看 图 像 效 果 ， 则 需要 使 用 Photoshop 软 件 ， 对 于 没有 安装 此 软件 的 用 户 来 说 就 非常 麻 
烦 ， 所 以 在 存储 时 也 可 以 将 图 像 男 存 为 其 他 格式 。 执 行 “ 文 件 > 和 存储 为 ”菜单 命令 ,打开 “另存 为 ”对 话 框 ， 对 话 框 中 的 文件 名 
不 变 ， 选 择 保存 类 型 为 TIFF (*.TIF;*.TIFF) 格式 ， 设 置 后 单 击 “ 保 仔 ” 按 钮 ; 弹出 “TIFF 选 项 ”对 话 框 ， 在 对 话 框 中 单 击 “ 确 
定 ” 按 钮 ， 在 弹出 的 对 话 框 中 再 单 击 “ 确 定 ” 按 钮 ， 人 存储 图 像 。 


一 一 一 0 TIFF 选项 —_— 
文件 名 (N) 将 六 名 后 的 商品 图 像 存储 于 指定 位 轩 pe ee em 
时 天 全 号 醒 行 [RSBRGBiV 


WU 站 本 通通 IRRGGEBIH) 取消 | 

Sk es 字 匠 外 诺 
大 型 文档 格式 (*.PSB) [| ELD ‘@; IBM PCI] 
BMP (*.BMP-*.RLE:*.DIB) 品 愉 [1 量 去 什 = "Mcintosh MY 
CompuServe GIF (*,GIF) 了 文件 i 国语 压 六 
Dicom (*,DCOM:*.DC3:*,DIC) 名 E 在 盖 粮 出， 训 件 往 广 % 
Photoshop EPS (*.EPS) | | 达 包 图 入 生计 炬 [5) zP {存储 边 蛋 ， 冯 件 圈 小 ) 
photoshop DCS 1.0 (*.EPS) ee 性 


Photoshop DCS 2.0 (*.EPS) 
IFF 格式 ("IFF:*.TDI) 
JPEG (*JPG*JPEG:*JPE) 


JPEG 2000 (JPF:*JPXR* JP2* J2C* 2R* PCO) 

JPEG 要 体 (JPS) 

POA (PCX) 

Photoshop PDF (*.PDF;*.PDP) 

Photoshop Raw (*.RAW) 

pixar (*.PXR) 

PNG (PNG:".PNS) 

Portable Bit Map (*.PBM:*.PGM:*,.PPM:*.PNM:*.PFEM:*.PAM) 


Scitex CT (*,SCT) 四 aa gap 
棕 靖 所 后 的 剖 品 避 二 主人 性 于 条 盏 位 辐 古 请 捉 后 的 贾 品 虽 且 在 性 于 招 下 位 局 
于 西 rga (TOA VODA .ICB:*WST) 


TIFF (*.TIF*,TIFH) 
多 图 片 属 式 (*.MPO 


实例 09 ”指定 多 种 格式 导出 商品 图 像 


在 Photoshop 中 制作 图 像 时 ， 由 于 图 片 较 大 ， 直 接 仓储 整个 图 片上 传 到 网 店 上 会 大 大 影响 网 页 的 打开 和 浏览 速度 ， 给 顾客 
造成 不 便 。 这 时 需要 使 用 Photoshop 中 的 “切片 工具 ”和 导出 功能 将 图 像 分 成 多 张 导 出 ， 且 保存 为 适合 网 络 传输 的 格式 ， 然 后 
上 传 至 网 店 ， 以 加 快 网 页 图 片 的 下 载 速度 。 


素 材 随 书 资源 \ 素 材 \01\15.psd 
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步骤 01 使 用 “切片 工具 ”对 图 像 切片 
打开 素材 文件 15.psd， 单 击 工具 箱 中 的 “切片 工具 ”按钮 国 ， 将 鼠标 移 至 图 像 上 ， 单 击 并 拖 岛 鼠标 ， 在 图 像 窗口 中 将 图 片 


分 成 右 干 份 。 


全 场 优 惠 券 大 放送 | 全 场 满 就 送 全 场 最 低 价 全 场 淘金 币 全 场 疯狂 购 
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过 时 不 候 ! 我 亏 钱 你 开心 国王 
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步骤 02 设置 存储 选项 
执行 “文件 > 导出 > 存储 为 Web 所 用 格式 (旧版) ”菜单 命令 ,或 者 按 下 快捷 键 Shift+Ctrl+Alt+S， 打开 “存储 为 Web 所 用 


格式 ”对 话 框 ， 在 对 话 框 中 修改 图 片 的 格式 、 品 质 等 选项 。 


| [um | 
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步骤 03 ”指定 文件 名 和 保存 格式 
设置 完成 后 单 击 “ 和 存储 ”按钮 ， 弹 出 “将 优化 结果 存储 为 ”对 话 框 。 由 于 最 终 需 要 将 图 像 应 用 于 网 络 ， 因 此 单 击 “格式 ”下 


拉 按 钮 ， 在 展开 的 列表 中 选择 “HTML 和 图 像 ” 选 项 ， 设 置 后 单 击 “ 保 存 ” 按 钮 


] ) 全 庄户 国 - | 


文件 名 四 店铺 优惠 券 设计 . htnl | 
格式 : JWNL 和 国人 - 


[保存 G6) | 


店铺 优 赢 券 设计 . htnl 


步骤 04 ”导出 并 查看 效果 


弹出 警告 对 话 框 ， 单 击 对 话 框 中 的 “确定 ”按钮 ， 导 出 图 像 。 打 开 文 件 夹 ， 可 以 看 到 根据 切片 划分 存储 好 的 图 片 。 


eb Ds 


不 用 显示 


第 2 草 ”网 店 图 像 的 快速 调整 


网 店 妆 修 是 一 项 较为 精细 和 繁琐 的 工作 ， 需 要 对 采集 的 素材 进行 一 系列 的 整理 、 修 饰 、 美 化 和 组 合 ， 才 能 最 终 应 用 到 网 店 
中 。 在 进行 网 店 的 委 修 设计 之前 ， 玫 移 需要 掌握 一 些 网 店 图 像 的 快速 处 理 技巧 ， 如 调整 图 像 的 大 小 、 分 辨 率 ， 更 改 网 店 图 像 的 构 
图 和 对 图 像 进行 自由 旋转 、 缩 放 等 。 这 些 操作 均 可 以 使 用 Photoshop 中 的 菜单 命令 或 工具 来 完成 。 通 过 对 图 像 的 快速 调整 ， 可 
以 让 照片 在 网 店 委 修 中 得 到 更 完美 的 应 用 。 


10 调整 拍摄 的 商品 照片 尺寸 
11 调整 分 辨 率 快 速 缩小 照片 
12 根据 网 店 委 修 情况 调整 画布 大 小 
13 ”快速 复制 和 缩放 文件 中 的 商品 图 像 


14 商品 照片 的 翻转 


16 ”商品 图 像 的 精确 裁剪 


17 ”校正 担 摄 原因 导致 的 倾斜 照片 


实例 10 ”调整 扣 报 的 两 品 照 三 尺寸 


为 了 给 后 期 处 理 留 下 更 多 的 调整 空间 ， 扣 报时 相机 中 所 设置 的 照片 尺寸 一 般 相对 较 大 ， 通 常会 达到 2MBl 以 上 。 如 果 将 这 样 
的 照片 作为 商品 介绍 上 传 到 互联 网 上 ,会 占用 较 大 的 存储 空间 ， 并 且 会 增加 顾客 浏览 时 等 待 的 上 时间。 为 了 解决 这 个 问题 ， 在 后 期 


处 理 时 应 当 使 用 “图 像 大 小 ”命令 对 照片 的 尺寸 进行 调整 。 
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款 材 随 书 资源 \ 背 材 \02\01.jpg 


随 书 资源 \ 源 文件 \02\ 调 整 拍 摄 的 商品 照 


源 文 件 尺寸 jpg 


步骤 01 执行 “图像 大 小 ”菜单 命令 


打开 素材 文件 01jpg， 执 行 “ 图 像 > 图 像 大 小 ”菜单 命令 。 


模式 (M) 》 


调整 ()) ; 
写 动人 色调 (NN) Shift+Ctrl+L 
自动 对 比 度 (U) Alt+Shift+Ctrl+L 
自动 颜色 (O 〇 ) Shift+Ctr|+ 
辣 像 大 小 (..， At+Ctrl+l 
画布 大 小 (S}..。 愉 。 Ak+Ctrl+C 
图 像 旋 转 (O) 
墩 委 (P) 


弹出 “图 像 大 小 ”对 话 框 ， 在 对 话 框 左 侧 显示 了 图 像 的 预 抠 效果， 石 侧 则 为 当前 打开 照片 的 宽度 、 高 度 等 信息 。 这 张 照 片 为 
了 便于 后 期 处 理 ， 宽 度 和 高 度 相对 较 大 ， 而 且 分 辨 率 为 314ppi (像素 /英寸 ) ， 也 比较 大 。 


图 像 大 小 : 34.9M 
尺寸 : [=] 3024 像素 x 4032 像素 
调整 为: | 原稿 夏 = 
NO 502+ | [全 要 
一 并 (6): [4032 ] [信康 
9 于: [514 [太吉 
[Vi 重新 采样 (5): rE 


EE | 


步骤 03 ”更 改 图 像 大 小 


对 于 网 店 装修 来 讲 ， 这 张 照 片 的 尺寸 太 大 ， 会 增加 浏览 等 等 时 间 ， 所 以 需要 在 后 期 处 理 时 缩小 图 像 的 尺寸 。 由 于 网 店 中 展示 
商品 的 图 像 壳 度 限制 为 950 像 素 ， 所 以 在 “宽度 ”文本 框 中 输入 950， 输 入 后 可 看 到 图 像 的 高 度 也 随 之 友 生 了 改变 。 


图 像 大 小 : 3.44M (之 前 为 34.9M) 
尺寸 : [=-] 950 像素 x 1267 像素 
调整 为 : | 自 定 
一 宽度 (D): |950 ] 像素 


上 ER 
-一 高 度 (G): 1267 | | 像素 | 
分 状 挛 [R): | 314 | | 像素 /英寸 


[WV 重新 采样 (5): | 自动 


步骤 04 至 看 图 像 效 果 


设置 完成 后 单 击 “确定 ”按钮 ， 返 回 图 像 窗口 ， 可 以 看 到 在 相同 的 显示 比例 下 ， 图 像 变 小 了 。 执 行 “ 视 图 >100%” 菜 单 命 
令 ， 将 图 像 以 100% 显 示 ， 同 样 可 以 看 到 清晰 的 画面 效果 。 


01,pg ®@ 12.5%(RGB/8) * 


an 着 一 一 


CC>_ 
二 
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实例 11 贡 整 分 状 率 快速 缩 


除了 高 度 、 宽 度 会 影响 照片 的 尺寸 外 ， 分 辩 率 也 是 影响 照片 尺寸 的 一 个 因素 。 数 码 相 机 拍摄 的 商品 照片 的 分 辩 率 大 多 数 情 况 
下 为 300ppi 以 上 ， 而 网 店 沪 修 中 的 图 像 分 辩 率 不 需要 那么 高 ， 只 需要 达到 72ppi 即 可 。 所 以 在 上 传 照片 前 ， 可 以 将 照片 的 分 辩 率 
调整 为 72ppi。 


随 书 资源 \ 素 材 \02\02.jpg 


随 书 资源 \ 源 文件 \02\ 调 整 分 辩 率 快 
速 缩小 照片 .jpg 


步骤 01 执行 “图 像 大 小 ”菜单 命令 


打开 素材 文件 02.jpg， 执 行 “ 图 像 > 图 像 大 小 ”菜单 命令 。 


sl jx rr — LL ei i sd a | 于， 一 和 
| | ee i y T= = 一 -i 
蕊 | a 有 1 pee -二 一 天 | | Ey) Li Pe 


模式 (M) 》 
国 调整 ()) » 
富 动 色调 (NN) Shift+Ctr|+L 
自动 对 比 度 (U) Alt+Shift+Ctr|+L 
中 动 癌 色 ( 口 ) Shi 人 t+Ctrl+B 


画布 大 小 (S)..。 上 Alk+rctrl+C 
图 像 旋转 (G) } 
裁剪 (P) 

裁 切 (R).. 

显示 全 部 (W) 


步骤 02 打开“ 图 像 大 小 ”对 话 框 


打开 “图 像 大 小 ”对 话 框 ， 在 对 话 框 右 侧 显 示 了 当前 打开 图 像 的 大 小 和 像素 值 ， 可 以 看 到 为 了 便于 后 期 操作 ， 拍 报时 将 相机 
分 辩 率 设置 为 300ppi。 


图 像 大 小 : 28.7M 站 
尺寸 : [=] 3872 像素 x 2592 像素 
调整 为 
一 宽度 (D): | 如 了 
一 高 度 (6): |2592 | 
分 状 率 (R): 英 - 
重新 采样 (5): 


步骤 03 ”重新 输入 分 状 率 


将 昭 标 移 人 至 “分 辩 率 ”文本 框 中 ， 将 分 辨 率 设 置 为 72ppi， 设 置 后 友 现 图 像 的 冤 度 和 高 度 也 友 生 了 变化 。 根 据 网 店 六 修 图 像 
的 宽度 限制 ， 再 将 “宽度 ”设置 为 950 像 素 ， 设 置 后 单 击 “ 确 定 ” 按 钮 。 


图 像 大 小 : 1.65M (之 前 为 28.7M) i 
尺寸 : 929 像素 x 622 像素 


ms 为 [BE asia 
一 宽度 (D): [929 | [ 像素 调整 为 : | 上 自 定 


-一 高度 (G6): 622 | 像素 ee ) 像素 En 
分 辩 率 (R， 各 一 高 度 (6) 像素 
呵 重 新 采样 (9: [E 动 ”分 淮 奉 (R 像素 /英寸 
局 重新 采样 (5): 


图 像 大 小 : 1.73M (之 前 为 28.7M) 举 . 


步骤 04 ”查看 图 像 效果 


选择 “缩放 工具 ”， 蛙 击 “放大 ”按钮 ， 将 图 像 放 大 ， 同 样 可 以 看 到 非常 清晰 的 鞋子 图 像 。 


反 巧 提示 : 图 像 大 小 的 设置 


位 图 图 像 在 高 度 和 宽度 方向 上 的 像素 总 量 称 为 图 像 的 像素 大 小 。 设 置 “ 重 新 采样 ”选项 时 ， 如 果 设 置 的 像素 大 于 原 图 像 的 像 
素 ， 则 图 像 会 出 现 模糊 或 像素 块 。 


买 例 12 ”根据 网 店 委 修 情况 调整 男 布 大 小 


在 后 期 处 理 时 ， 一 些 商 品 照片 由 于 拍摄 时 的 尺寸 设置 和 拍摄 角度 问题 ， 不 便 再 裁 筋 或 重 设 像素 ， 这 时 融 可 以 通过 调整 国 布 大 
小 的 方式 来 解决 后 期 的 输出 问题 。Photoshop 中 的 “画布 大 小 ”命令 可 快速 增 大 或 减 小 照片 的 画布 大 小 ， 使 照 厂 满足 网 店 六 修 
的 要 求 。 


款 材 随 书 资源 \ 泰 材 \02\03.jpg 


随 书 资源 \ 源 文件 \02\ 根 据 网 店 装 修 


源 义 件 情况 调整 画布 大 小 .jpg 


步骤 01 执行 “画布 大 小 ”菜单 命令 


打开 素材 文件 03jpg， 友 现 画 面 中 纳入 了 过 多 的 育 景 元 素 ， 导 致 男 面 主 体 不 够 醒目 。 执 行 “ 图 像 > 画布 大 小 ”菜单 命令 ， 打 
开 “ 画 布 大 小 ”对 话 框 ， 其 中 显示 了 当前 文件 的 大 小 。 


当 两 讽 小 ; 11.9 全 
醒 展 : 8. 雪 : 昌 六 
草 度 ; 59. 时 是 米 
新 建 大 小 :19 
直 度 [WeB19 || 区 六 


高 麻 {H}: 58.61 | 区 六 


_ 十 相 则 6 
a be 


a 


国 布 柱 根 荐 色 :| 前 时 引 国 


步骤 02 设置 画布 大 小 


这 里 要 将 这 张 照片 设置 为 主 图 效果 ， 所 以 在 “画布 大 小 ”对 话 框 中 单 击 “ 宽 大 ”和 “高度 ” 石 侧 的 第 二 列 选 项 ， 将 单位 设 


“像素 ”， 再 根据 主 图 的 尺寸 要 求 ， 输 入 “宽度 ”与 “局 度 ” 值 ， 输 入 后 单 击 “ 确 定 ” 按 钮 。 弹 出 提示 对 话 框 ， 单 击 “ 继 
续 ” 按 钮 ， 调 整 男 布 大 小 。 


画布 大 个 


当前 天 小 : 11.9M 
宽度 : 2500 像素 
高 度 : 1667 像素 


新 建 大 小 : 732.4K 
宽度 (W)j: |500 ”|| 像素 | 


高 度 (H): | 像素 | 
| ] 相对 (R) 


P" 新 画布 二 小 小 于 当前 国 布 本 小 ; 将 进行 一 些 争 切 < 


| P| | 职 清 | 


干 吾 显示 


步骤 03 ”设置 画布 扩展 颜色 


为 了 让 画面 显得 更 紧凑 ， 还 可 以 为 图 像 添加 边 杠 效果。 执行“ 图 像 > 画 布 大 小 ”菜单 命令 ， 打 开 “ 画 布 大 小 ”对 话 框 ， 将 单 


位 选 定 为 “像素 ”， 设 置 比 原 图 像 大 一 些 的 “ 免 厌 ”和 “高 度 ” 值 ， 再 单 击 “ 画 布 扩展 赢 色 ” 下 拉 按 钮 ， 企 展开 的 列表 中 单 
击 “ 其 他 ”选项 ， 在 弹出 的 对 话 框 中 设置 颜色 为 R132、G132、B131。 


当前 大 小 : 732.4K 画布 扩展 颜色 : | 前 术 
宽度 : 500 像 圳 
高 度 : 500 像素 


新 建 大 小 : 822.9K 


员 度 Wi: 550 ”| [ 信 素 


高 度 (H): |530 || 像素 3 
相对 (R) 
放下 全 
本 一 一 证 


x|y | 


步骤 04 ”应 用 添加 的 边框 效果 


设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 返 回 “ 画 布 大 小 ”对 话 框 ， 在 对 话 框 中 会 显示 重新 设置 的 画布 颜色 ， 单 击 “ 确 定 ” 按 钮 ， 应 
用 画布 大 小 设置 ， 为 图 像 添加 边框 效果 。 


当前 大 小 : 732.4K 
宽度 : 500 像素 
高 度 : 500 像素 
新 建 大 小 : 822.9K 
宽度 (W):|530 || 和 鳃 素 | 
高 度 (H): | 530 | 一 泰 。 “| 


[|_| 相对 (有 


定位 : 了 个 | 
本 四 一 和 


+\ 


画布 扩展 颜色 : | 其 它 .. :| 转 


实例 13 ”快速 复制 和 编 放 文件 中 的 商品 图 像 


网 店 装修 中 为 了 让 图 像 达 到 更 完美 的 状态 ， 往 往 会 对 照片 的 大 小 、 位 置 等 进行 调整 。Photoshop 中 可 以 使 用 “ 变 
换 ” 或 “上 自由 变换 ”命令 对 照片 进行 大 小 、 位 置 的 调整 ， 也 可 以 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 ， 利 用 编辑 框 编 辑 图 像 
的 大 小 和 位 置 。 


Rimeil 梧 爱 卡 通 系 列 组 扣 式 并 线 器 
| 


床 材 随 书 资源 \ 素 材 \02\04.jpg 一 07 .jpg 


随 书 资源 \ 源 文件 \02\ 快 速 复制 和 缩放 文件 


源 文 件 中 的 商品 图 像 .psd 


步骤 01 打开 并 复制 图 像 


打开 素材 文件 04.jpg， 这 是 一 张 下 载 的 商品 细节 展示 模板 ， 这 里 需要 用 目 己 担 摄 的 商品 照片 蔡 换 模板 中 的 商品 对 象 。 打 开 素 
材 文 件 05.jpg， 选 择 “ 移 动工 具 ”， 把 打开 的 绕 线 器 图 像 拖 忠 至 04.jpg 中 。 


步骤 02 ”使 用 目 由 变换 编辑 框 缩放 图 像 


复制 图 像 后 ， 可 以 看 到 照片 尺寸 较 大 ， 所 以 需要 对 它 进行 缩放 操作 。 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 ， 将 鼠标 移 公 
编辑 框 右 下 角 位 置 ， 当 鼠标 变 为 双 同 箭头 时 ， 单 击 并 向 内 侧 拖 息 ， 缩 放 图像 。 


步骤 03 ”移动 缩小 后 的 图 像 位 置 


继续 对 图 像 进行 缩放 ， 将 图 像 编 小 至 合适 的 大 小 后 ， 再 单 击 并 拖 遇 图 像 ， 调 整 图 像 的 位 置 ， 按 下 Enter 键 ， 应 用 调整 操作 ， 
完成 图 像 大 小 和 位 置 的 更 改 。 


,| 


步骤 04 ”使 用 同样 的 万 法 调整 其 他 图 像 


继续 使 用 同样 的 方法 ， 把 素材 文件 06.jpg、07.jpg 也 复制 到 模板 中 ， 得 至 
中 的 图 像 ， 调 整 其 大 小 和 位 置 ， 完 成 商品 图 像 的 制作 。 


-一 


“图 层 2” 和 “图 层 3” 图 层 ， 分 别 选 中 这 两 个 图 层 


实例 14 ”商品 照 三 的 翻转 


在 对 商品 进行 拍摄 时 ， 为 了 配合 担 摄 环 境 和 构图 需要 ， 有 时 会 将 数码 相机 坚 起 来 拍摄 ， 这 样 拍摄 的 数码 照片 不 便于 后 期 的 济 
览 ， 也 不 利于 网 店 中 商品 的 展示 。 因 此 ， 可 以 使 用 Photoshop 中 的 “图 像 旋 转 ” 命 令 旋转 或 翻转 整个 数码 照片 ， 将 倒立 或 镜像 
的 数码 照片 转正 。 


宗 材 随 书 资源 \ 背 材 \02\08.jpg 


源 文 件 随 书 资 源 \ 源 文件 ,02\ 商 品 照片 的 翻转 .jpg 


步骤 01 打开 图 像 执行 旋转 操作 


打开 素材 文件 08jpg， 友 现 照 睛 是 倒立 的 ， 需 要 对 其 进行 旋转 ， 恢 复 至 正音 的 视 帝 效果。 执行 “图 像 > 图 像 施 转 > 逆 时 针 90 


度 ” 荣 单 命令 。 


图 像 四 ”图 层 (L) 文字 (Y) 选择 (5) 滞 济 (1) 3D(D) 视图 (V) 关 
模式 (M) 
调整 U) | 


自动 色调 (N) Shift+Ctrl+L 
自动 对 比 度 (U) Alt+Shift+Ctrl+L 
自动 颜色 ( 口 ) Shift+Ctr|+B 


图 像 大 小 加 .… Alt+Ctr|+] 
画布 大 小 [9),.. Alt+Ctrl+C 

| “180 度 (1) 
裁 开 (PP) 顺 时 针 90 度 (9) 
裁 切 (R)..， 逆 时 针 90 度 (0) 
显示 全 部 (W) 任意 角度 [各 )… 
复制 (D)... 水 平 番 转 画 布 (H) 


应 用 图 像 (Y).. 竺 直 翻转 画布 (W) 
计算 (Q).. | 


步 又 02 ” 逆 时 针 旋转 图 像 


将 图 像 按 逆 时 针 万 同族 转 90" 后 ， 友 现 图 像 的 角度 还 是 不 对 ， 表 执行 “图 像 > 图 像 旋 转 > 逆 时针 90 度 ”菜单 命令 。 


图 像 0) ”图 层 (U) 文字 (Y) 选择 (9 ” 渡 第 (T 3D(D) 视图 (v) 痢 
模式 [MI] 

调整 (J) 

自动 色调 (N) Shift+Ctrl+L 

自动 对 比 度 (U) Alt+Shift+Ctrl+L 

生动 阁 色 IO] Shift+Ctrl+B 


图 像 大 小 人 1)..… Alt+Ctr|+l 


画布 大 小 (S).. At+Ctrl+C 

图 像 旋转 (G 180 度 {1) 

二 前 (P) 顺 时 针 90 度 (9) 
壤 切 (R)... 首 时 针 90 度 [0 


we 全 狼人 (V) 


复制 心 ).… 
应 用 图 像 (Y)… 
计算 (C).… 


步骤 03 ”水 平 翻转 图 像 


执行 命令 后 发 现 图 像 的 角度 恢复 到 正常 状态 了 。 为 了 让 顾客 感受 到 不 同 角度 下 的 商品 效果 ， 还 可 以 执行 “图 像 > 图 像 旋转 > 
水 平 翻转 画 布 ” 荣 单 命令 ， 水 平 翻转 画布 效果 。 


180 度 (]1) 
顺 时 针 90 度 (9) 
逆 时 针 90 度 (0) 


技 15 提 示 : 不 同 角度 的 图 像 旋转 


在 “图 像 旋转 ”级 联 菜单 中 ， 执 行 “180 度 ”菜单 命令 ， 可 以 将 图 像 旋 转 180”; 执行 “ 顺 时 针 90 度 ”菜单 命令 ， 可 以 将 图 像 
按 顺 时 针 方 向 旋转 90”; 执行 “ 递 时 针 90 度 ”菜单 命令 ， 可 以 将 图 像 按 逆 时 针 方 向 旋转 90”; 执行 “任意 角度 ”菜单 命令 ， 可 打 
“旋转 画布 ”对 话 框 ， 在 对 话 框 的 “角度 ”选项 中 可 设置 要 旋转 的 角度 ， 并 且 可 以 设置 旋转 的 方向 ; 执行 “水平 翻转 画布 “ 菜 
单 命令 ， 可 以 以 水 平方 向 进行 翻转 ; 执行 “ 重 直 翻转 画布 ”菜单 命令 ， 可 以 以 重 直 方向 进行 翻转 。 


反 巧 提示 : 快捷 键 操 作 还 原 图 像 


旋转 图 像 后 ， 按 下 快捷 键 Cttl+Z， 可 以 快速 取消 上 一 步 的 操作 ; 按 下 快捷 键 Cl+Alt+ 乙 ， 则 可 以 逐步 取消 之 前 的 操作 。 


实例 15 ”快速 裁 勇 商品 


欧 


像 


完成 照片 的 拍摄 后 ， 如 果 只 需要 照片 中 某 一 部 分 图 像 ， 就 需要 把 多 余 的 部 分 裁 掉 ，Photoshop 中 的 “裁剪 工具 ”可 以 对 商 
品 照 片 进 行 快速 的 裁剪 操作 。 此 工具 通过 绘制 裁剪 框 来 控制 裁剪 范围 ， 操 作者 可 以 根据 实际 需要 快速 裁剪 照片 。 


素 材 随 书 资 源 \ 素 材 \02\09.jpg 


随 书 资源 \ 源 文件 \02\ 快 速 裁剪 照片 


源 文件 突出 商品 图 像 jpg 


步骤 01 选择 “裁剪 工具 " 


将 妃 标 移 至 照片 中 间 位 置 并 单 击 女 标 ， 显 示 一 个 与 图 像 同等 大 小 的 裁剪 框 ， 这 里 主要 表现 的 对 象 是 裤子 ， 所 以 首先 要 将 上 半 
部 分 裁剪 挥 。 将 鼠标 移 公 裁剪 框 项 部 ， 当 指针 变 为 双 同 箭头 时 ， 单 击 并 向 下 拖 忠 昭 标 ， 调 整 裁 郭 框 的 大 小 。 


步骤 02 ”调整 裁 舅 框 的 大 小 


打开 素材 文件 09.jpg。 这 张 照 片 主要 表现 的 商品 为 模特 身上 的 牛仔 钙 ， 但 是 因为 构图 不 当 ， 导 致 主体 不 突出 ， 让 观 者 不 知道 
图 像 要 表现 的 商品 是 衣服 、 裤 子 还 是 鞋子 。 所 以 在 后 期 处 理 时 需要 对 照片 进行 裁 问 ， 调 整 构图 。 单 击 工具 箱 中 的 “ 裁 部 工具 ” 按 
钮 ， 在 图 像 边缘 显示 虚线 边框 效果 。 


步骤 03 ”裁剪 照片 突出 商品 


继续 使 用 同样 的 方法 ， 调 整 裁剪 框 的 大 小 ， 保 留 主要 的 牛仔 裤 区 域 。 设 置 好 后 单 击 “裁剪 工具 ”选项 栏 中 的 “提交 当前 裁 剖 
操作 ”按钮 国 ， 完 成 照片 的 裁剪 操作 。 


反 巧 提示 : 使 用 预 设 裁 勇 照片 


使 用 “裁剪 工具 裁剪 照片 时 ， 可 以 选择 “ 预 设 ”列表 中 的 选项 将 照片 快速 裁剪 为 指定 大 小 。 单 击 “ 预 设 ” 选 项 右 侧 的 下 拉 
按钮 ， 在 展开 的 下 拉 列 表 中 可 看 到 其 中 包含 了 “原始 比例 1:1 (方形 ) 4:5 (8:10) “前面 的 图 像 “4X5 英 十 
300ppi ”等 选项 。 裁 剪 时 可 以 选择 这 些 预 设 的 尺寸 及 比例 对 裁剪 框 进行 快速 设 定 ， 也 可 以 将 设置 的 裁剪 比例 存储 为 预 设 ， 方 便 下 
次 使 用 。 


实例 16 “商品 图 像 的 精确 裁剪 


Photoshop 中 使 用 “裁剪 工具 ”可 以 实现 照片 的 快速 裁剪 ， 而 在 网 店 妆 修 中 ， 不 同 的 模块 会 有 不 同 的 尺寸 限制 ， 如 果 要 将 
担 摄 的 照 睛 裁 筋 为 特定 的 尺寸 ， 则 使 用 “裁剪 工具 ”如 不 太 适 合 了 。 此 时 可 结合 选区 工具 和 “裁剪 ”命令 来 完成 更 为 精确 的 照片 
裁 吝 工 作 。 


在 二 22 
优 站 天 美 风 湖 素 材 随 书 资源 \ 素 材 \02\10.jpg、11.psd 
he 随 书 资源 \ 源 文件 \02\ 商 品 图 像 的 精 


步骤 01 使用“ 丰 形 选 框 工 具 ” 绘 制 选 区 


创建 固定 大 小 的 选区 后 ， 选 区 内 的 图 像 残 是 要 保留 的 图 像 区域 。 此 时 执行 “图 像 > 裁 勇 ”菜单 命令 ， 会 将 选区 以 外 的 图 像 全 
部 裁 郭 挥 ， 只 保留 选区 中 的 图 像 。 


步骤 02 执行 “ 裁 勇 ” 菜 蛙 命令 裁 甬 图 像 


打开 素材 文件 10.jpg， 这 张 照 厂 将 用 于 制作 欢迎 模块 的 图 片 ， 需 要 根据 网 店 中 该 模块 的 尺寸 要 求 对 照片 进行 裁 齐 。 由 于 欢迎 
模块 中 图 像 的 高 度 最 高 不 可 超过 600 像 素 ， 而 宽度 则 应 大 于 或 等 于 750 像 素 ， 所 以 选择 “ 算 形 选 框 工具 ”， 在 “ 粉 形 选 框 工 
具 ” 选 项 栏 中 选择 “固定 大 小 ”样式 ， 先 把 “局 度 ”设置 为 600 像 素 ， 再 设置 “过 度 ”为 1200 像 素 ， 然 后 在 图 像 中 单 击 天 会 得 到 
一 个 同等 大 小 的 选区 。 


图 像 中 ”图 层 (L) 文字 (Y) 选择 (S) 访 第 
模式 (M) | 
调整 () 
自动 色调 (N) Shift+Ctrl+L 


自动 对 比 度 (U) Alt+Shift+Ctrl+L 
言 动 赢 色 ( 〇 ) Shift+Ctr|+B 


图 像 大 小 (1)... Alt+Ctrl+1™ 


画布 大 小 (S)... Alt+Ctrl+C 


步骤 03 ”取消 选区 并 添加 文字 


执行 “选择 > 取消 选择 ”菜单 命令 ， 或 者 按 下 快捷 键 Ctrl+D， 取 消 选区 。 打 开 素 材 文 件 11.psd， 将 打开 的 素材 复制 到 裁剪 的 
照片 中 ,调整 至 合适 的 大 小 ， 即 可 看 到 将 照 厂 裁剪 并 应 用 于 欢迎 模块 时 的 效果 。 
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扩 巧 提示 : 设置 选区 样式 


在 “和 拢 形 选 框 工具 ”选项 栏 中 有 一 个 “样式 ”选项 ， 用 于 设置 选区 的 样式 。 默 认 情 况 下 选择 “正常 ”选项 ， 即 绘制 自由 大 小 
的 选区 ; 如 果 选 择 “ 固 定 大 小 或 “固定 比例 ”选项 ， 则 会 激活 之 边 的 “宽度 ”和 和“ 高度” 选项， 此 时 可 以 在 图 像 中 创建 固定 比 
例 或 固定 大 小 的 矩形 选区 。 


从 


实例 17 ”校正 担 摄 原因 导致 的 倾 料 昭 


及 影 师 在 担 摄 商品 时 ， 为 了 更 好 地 展示 商品 的 细节 或 某 些 局 部 特征 ， 会 在 担 摄 的 时 候 调 整 相 机 的 拍摄 角 原 。 如 果 数 码 相 机 没 
有 保持 水 平 或 垂直 ， 那 么 拍摄 出 来 的 照片 融 容 易 出 现 倾斜 的 情况 ， 不 利于 商品 的 得 看 。 这 时 需要 通过 后 期 处 理 ， 对 倾斜 的 照片 进 
行 校正 。 


订 材 随 书 资源 \ 泰 材 \02\12.jpg 


随 书 资源 \ 源 文件 \02\ 校 正 拍摄 原因 


原文 件 导致 的 倾斜 照片 psd 


步骤 01 绘制 水 平 拉 直 参考 线 


打开 “旋转 画布 ”对 话 框 ， 在 对 话 框 中 会 根据 绘制 的 参考 线 上 自动 设置 图 像 旋 转 的 角度 ， 这 里 只 需要 单 击 “ 确 定 ” 按 钮 ， 束 可 
以 校正 倾 任 的 图 像 。 


| 


步骤 02 执行 “任意 角度 ”菜单 命令 


中 
| 


当 拖 钨 至 一 定位 置 后 释放 鼠标 ,创建 拉 直 参考 线 ， 执 行 “图像 > 图 像 旋 转 > 任 意 角 度 ” 菜 早 命 令 。 


| : 


注 i [里 


步 又 03 ”旋转 倾斜 的 图 像 


图 像 丰 图 层 响 


模式 (M) 
调整 ()) 
自动 色调 (N) 


生动 对 比 度 (U) 


自动 癌 色 (DO) 


图 和 像 大 小 [TD).. 
画布 大 小 (S).. 


装 更 [D 
裁 切 人 R)... 
复制 [D)... 


应 用 图 像 (Y)... 
计算 (CO)... 


长 字 人 YY) 


选择 [5) 


Shi 性 +Ctr| +L 


Alt+Shift+Ctrl+L 


Shift+Ctrl+B 


Alt+Ctrl+I 


Alt+Ctrl+C 


苇 襄 [1T) 


3D(D) 视图 (WV) 


180 度 (1) 
顺 时 针 90 度 (9) 
送 时 轩 90 度 (0) 
任意 前 度 (A).. 


革 


mm mm | 
水 平 副 转 画 布 [H) 


垂直 副 转 画布 (V) 


打开 素材 文件 12.jpg， 因 为 操 报 角度 的 原因 ， 图 像 中 的 礼服 变 得 倾斜 ， 需 要 加 以 校正 。 在 校正 图 像 前 ,复制 “背景 " 


图 层 ， 


创建 “背景 拷贝 ”图 层 。 单 击 工具 箱 中 的 “标尺 工具 ”按钮 ， 沿 照片 中 的 水 平 线 单 击 并 拖 忠 幅 标 。 


O 〇 度 顺 时 针 (O) 
@) 度 逆 时 守 (W) | 取消 | 


步骤 04 使用“ 裁 勇 工具 ” 裁 荔 图像 


校正 图 像 后 ， 友 现 由 于 设置 的 背景 色 为 日 色 ， 所 以 校正 后 多 余 的 部 分 自动 应 用 日 色 填 序 。 为 了 让 画面 效果 更 加 完美 ， 可 以 将 
这 些 白 色 的 部 分 裁 挥 。 选 择 “裁剪 工具 ”， 将 鼠标 移 人 至 礼服 图 像 上 ， 单 击 并 拖 擅 鼠标， 绘制 一 个 裁 剪 框 ， 确 定 裁 剪 学 围 后 右 击 裁 
勇 框 中 的 图 像 ， 在 弹出 的 快捷 菜单 中 执行 “裁剪 ”命令 ， 裁 剪 图 像 。 


第 3 草 ”商品 照片 的 修复 与 修饰 


担 摄 完 商 品 照 请 后， 可 能 会 友 现 拍摄 的 照片 存在 很 多 瑕 疙 ， 如 污点 、 杂 扣 、 班 点 、 划 痕 等 ， 这 些 都 会 影响 顾客 对 商品 的 印 
象 ， 加 之 网 店 营 销 本 身 丈 是 一 种 视 党 上 的 营销 ， 如 果 图 片 不 能 吸引 人 ， 上 自然 整 不 会 有 很 高 的 销量 。 所 以 ， 在 进行 照片 的 设计 之 
前 ， 对 照片 瑕 水 的 修复 是 网 店 闭 修 中 非常 重要 的 环节 之 一 。 在 Photoshop 中 可 以 运用 多 种 不 同 的 图 像 修 复 与 修饰 工具 完美 修复 
商品 照 卢 的 瑕 水 。 


18 ”快速 修复 商品 照片 中 的 细小 瑕 意 
19 去 除 商 品 照片 中 的 杂 物 


20 ”修复 商品 照片 大 面积 的 瑕 半 


22 ” 擦 除 商品 图 像 上 无 用 的 信息 
23 ”修复 轻微 变形 的 商品 
24 ”模糊 背景 让 照片 中 的 两 品 更 突出 


25 让 商品 : 变 得 清 晰 


买 例 18 ”快速 修复 商品 照 厂 中 的 细小 瑕 间 


在 担 摄 饰品 、 帽 子 和 服 北 照片 的 时 候 ， 大 多 数 情 况 下 模特 的 面部 都 会 展示 出 来 ， 而 模特 妆容 难免 会 存在 一 些 细小 的 瑕 意 ， 影 
啊 画 面 中 商品 的 表现 ， 这 时 融 需 要 对 这 些 细小 的 瑕 冰 进 行 修复 。 


宗 材 随 书 资源 \ 素 材 \03\01.jpg 


随 书 资源 \ 源 文件 \03\ 快 速 修复 商品 照片 中 


涯 文件 。 | 和 w 细 小 瑕 症 .pso 


步骤 01 打开 素材 图 像 


打开 素材 文件 01jpg， 这 张 照片 总 体 效果 不 错 ， 为 菜品 牌 家 居 服 模特 上 身 效 果 图 。 但 是 按 快 捷 键 Ctrl+ + 放大 图 像 后 观察 细 
证 ， 发 现 模特 面部 皮肤 有 一 些小 的 色 班 ， 因 此 在 后 期 处 理 中 需要 将 这 些 色 斑 去 挥 。 


步骤 02 使 用 “污点 修复 画笔 工具 ”修复 


对 于 照片 中 细小 的 瑕 疙 ， 可 以 选用 “污点 修复 画笔 工具 ”加 以 修复 。 此 工具 适合 于 较 小 且 密 集 的 瑕 钼 的 修复 ， 通 过 单 击 即 可 
快速 修复 图 像 。 选 择 “ 污 点 修复 画笔 工具 ”， 把 鼠标 移 至 皮肤 上 的 斑点 位 置 ， 单 击 鼠 标 后 即 可 看 到 该 位 置 的 斑点 被 去 控 了 。 


三 一 二 


上 


步骤 03 ”继续 修复 图 像 


为 了 让 模特 的 皮肤 变 得 更 干净 ， 可 以 继续 使 用 “污点 修复 画笔 工具 ”在 皮肤 上 的 瑕 羌 位 置 单 击 ， 通 过 连续 的 单 击 操作 ， 去 除 
皮肤 上 更 多 的 瑕 六 。 


~ 


步骤 04 设置 “表面 异 糊 ” 滤 镜 模糊 图 像 


去 除 瑕 站 后 ， 如 果 和 希望 模特 的 皮肤 看 起 来 更 光滑 ， 则 可 以 将 图 层 复 制 ， 执 行 “ 滤 镜 > 模 糊 > 表面 模糊 ”命令 ， 设 置 滤 镜 选 
项 ， 对 人 物 进行 模糊 ， 表 通过 添加 图 层 蒙 版 ， 对 皮肤 外 的 部 分 用 黑色 画笔 涂抹 ， 进 行 磨 皮 处 理 。 处 理 完成 后 ， 模 特 的 皮肤 看 起 来 


将 更 水 嫩 ; 肯 。 


品 预览 (P) 


QQ i000%  @ 


半径 {R); 5 侈 索 
盖 值 (T): 色 队 


买 例 19 ”去 除了 商品 照 刻 中 的 杂 物 


在 网 店 委 修 的 过 程 中 ， 如 果 想 使 商品 照片 的 硼 景 更 加 纯粹 或 者 是 突出 画面 中 的 商品 对 象 ， 则 可 以 将 照片 背景 中 的 隶 物 去 挥 。 
Photoshop 中 可 以 使 用 “修复 画笔 工具 ”来 去 除 商品 照片 中 的 杂 物 ， 本 实例 将 介绍 具体 的 操作 方法 。 


素 材 随 书 资源 \ 素 材 \03\02.jpg 


随 书 资源 \ 源 文件 \03\ 去 除 商 品 照片 中 的 
杂 物 .psd 


源 文 件 


步骤 01 打开 并 复制 图 像 


打开 素材 文件 02jpg， 由 于 这 张 照片 中 的 模特 是 坐 在 椅子 上 完成 的 拍摄 ， 因 此 画面 中 出 现 了 椅子 图 像 ， 影 响 了 整体 效果 ， 在 
处 理 时 需要 将 其 云 挥 。 移 按 下 快捷 键 Ctrl+J， 复 制图 像 ， 得 到 “图 层 1 


确保 复制 的 “图 层 1” 图 层 为 选中 状态 ， 选 择 工具 箱 中 的 “修复 画笔 工具 ”， 选 择 工具 后 ， 首 先 确 定 图 像 修 复 源 。 按 住 Alt 键 
不 放 ， 在 椅子 芳 边 干净 的 背景 处 单 击 ， 设 置 修复 源 ， 表 将 由 标 移 圣 椅子 所 在 位 置 ， 单 击 并 进行 涂抹 操作 。 


步骤 03 ”创建 选区 确定 修复 范围 


继续 使 用 相同 的 方法 修复 图 像 。 当 处 理 椅子 与 模特 相交 的 部 分 时 ， 为 了 让 修复 的 图 像 更 准确 干净 ， 可 选择 “钢笔 工具 ”， 在 
要 修复 的 区 域 绘 制 路 径 ， 并 将 绘制 的 路 径 转 换 为 选区 ， 然 后 按 住 Alt 键 不 放 ， 在 芳 边 干净 的 背景 处 单 击 ， 进 行 图 像 的 取样 。 


步骤 04 结合 “仿制 图 章 工具 ”修复 图 像 


将 鼠标 移 人 至 选区 内 的 椅子 所 在 位 置 ， 单 击 并 进行 涂抹 操作 ， 修 复 图 像 。 修 复 图 像 后 ， 如 果 完 得 被 修复 区 域 与 背景 融合 得 不 太 
目 然 ， 则 可 以 使 用 “仿制 图 章 工 具 ” 对 细节 做 简单 的 美化 ， 使 修复 后 的 画面 变 得 更 加 自然 、 漂 亮 。 


实例 20 ”修复 商品 照片 大 面积 的 瑕 兹 


在 拍摄 照片 的 时 候 ， 为 了 让 提 报 出 来 的 照片 显得 更 和 干净， 往往 会 对 拍摄 环境 进行 布置 。 本 例 所 用 的 照片 即 利 用 单 色 背 景 纸 进 
行 布 景 担 摄 ， 但 是 拍摄 出 来 的 照片 中 出 现 了 大 面积 的 折 痕 及 黑色 的 背景 ， 下 面 将 运用 “修补 工具 ”对 背景 进行 处 理 ， 修 复 照 请 上 
的 瑕 水 。 


一 素 材 随 书 资 源 \ 素 材 \03\03.jpg 


随 书 资源 \ 源 文件 \03\ 修 复 商品 照片 大 面 


源 文件 积 的 瑕 竟 .psd 


步骤 01 使 用 “修补 工具 ”创建 选区 


打开 素材 文件 03.jpg， 可 以 看 到 画面 中 左上 和 角 非 党 明显 的 黑色 背景 。 先 将 图 像 复 制 ， 选 择 工具 箱 中 的 “修补 工具 ”， 将 姐 标 
移 至 左上 角 位 置 ， 然 后 沿 着 黑色 区 域 单 击 并 拖 蝶 鼠标 ,创建 选区 ， 确 定 要 修补 的 图 像 攻 围 。 


步骤 02 单 击 并 拖 忠 选区 内 的 图 像 


确定 要 修补 的 区 域 后 ， 单 击 并 向 下 拖 蝶 至 干净 的 背景 处 ， 当 拖 蝶 至 合适 位 置 后 释放 姐 标 ， 此 时 可 以 看 到 原 选区 中 黑色 的 背景 
做 下 方 干净 的 育 景 蔡 损 了 。 
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步骤 03 ”使 用 “修补 工具 ”选择 并 去 除 挂钩 


这 张 照片 为 了 让 观 者 更 清和 芭 地 了 解 包 包 的 内 部 效果 ， 将 其 打开 采用 挂 拍 的 方式 拍摄 ， 所 以 处 理 育 景 后 ， 友 现 照片 顶部 还 有 多 


余 的 挂 钓 。 选 择 “ 修 复工 具 ”， 在 挂钩 所 在 位 置 单 击 并 拖 忠 ， 创 建 选区 ， 选 中 挂 钧 部 分 ， 表 向 右 拖 碟 至 芳 边 干净 的 背景 上 。 


- 
i 有 央 本 几 硬 。 硬 呈 本 


步骤 04 ”继续 修复 图 像 


要 去 挥 照 片 中 多 余 的 挂 钓 ， 使 用 “修补 工具 ”还 远 远 不 够 ， 对 于 挂钩 与 包 包 相 交 的 部 分 ， 可 以 用 “仿制 图 草 工具 ”， 做 更 精 
细 的 修复 。 选 择 “仿制 图 章 工 具 ”， 按 住 Alt 键 不 放 ， 在 挂钩 旁 干净 的 育 景 处 单 击 ， 取 样 图 像 ， 然 后 在 包 包 手 市 边 绿 的 挂钩 位 置 
单 击 并 涂抹 ， 得 到 干净 的 画面 效果 。 


实例 21 修补 商品 目 刁 缺陷 


对 于 网 店 中 的 商品 而 言 ， 通 单 不 会 只 用 于 一 次 担 摄 ， 而 在 长 期 的 担 摄 过 程 中 ， 商 品 难免 会 出 现 磨损 ， 这 样 担 报 出 来 的 商品 照 
会 让 顾客 对 商品 的 质量 产生 怀疑 。 所 以 在 后 期 处 理 过 程 中 ， 为 了 让 顾客 看 到 商品 最 完美 的 状态 ， 需 要 对 商品 目 身 外 观 上 的 缺陷 
进行 修复 。 本 实例 将 通过 详细 的 步骤 介绍 照片 中 商品 缺陷 的 修复 扩 术 。 


素 材 随 书 资源 \ 素 材 \03\04.jpg 


随 书 资源 \ 源 文件 \03\ 修 补 商 品 自身 缺 
陷 .psd 


源 文件 


步骤 01 打开 图 像 并 复制 图 层 


打开 素材 文件 04jpg， 按 下 快捷 键 Ctrl++ ， 将 图 像 放 大 ， 可 以 看 到 鼠标 线 已 经 断裂 ， 需 要 通过 后 期 处 理 加 以 修复 。 在 修复 
之 前 ， 为 了 保证 原 图 不 友 生 损伤 ， 移 把 原 图 像 复制 ， 创 建 “ 育 景 拷贝 ”图 层 。 


步骤 02 ”使 用 “仿制 图 章 工具 ”修复 图 像 


为 了 防止 用 户 看 到 图 像 有 修复 的 痕迹 ， 这 里 选择 适合 精细 修复 的 “仿制 图 章 工 具 ” 加 以 修复 。 单 击 工具 箱 中 的 “仿制 图 章 工 
具 ” 按 钮 ， 将 鼠标 移 人 至 完好 的 鼠标 绕 位 置 ， 按 住 Alt 键 不 放 ， 单 击 取样 仿制 源 ， 然 后 将 鼠标 移 人 至 断 色 的 鼠标 线 位 置 ， 单 击 并 涂抹 


步骤 03 ”继续 修复 其 他 瑕 闽 


修复 后 友 现 鼠标 上 还 有 一 些 友 丝 等 瑕 冰 。 按 住 Alt 键 不 放 ， 在 鼠标 商品 上 单 击 取样 图 像 ， 将 鼠标 移 全 上 友 丝 所 在 位 置 ， 单 击 并 
涂抹 图 像 ， 去 挥 鼠 标 上 明显 的 友 丝 。 继 续 使 用 相同 的 操作 方法 对 鼠标 上 的 其 他 瑕 站 进 行 修复 ， 处 理 后 得 到 更 加 干净 、 完 整 的 商品 
效果 。 


实例 22 ” 探 除 商品 图 像 上 无 用 的 信息 


在 网 店 半 修 中 ， 为 了 让 商品 更 突出 ， 在 后 期 处 理 时 会 将 商品 图 像 上 无 用 的 信息 去 挥 。 本 例 所 用 的 照 睛 展示 的 商品 是 玩具 汽 
车 ， 在 担 报 时 为 了 突出 商品 ， 用 了 一 本 黄色 的 杂志 做 背景 ， 导 致 担 摄 出 来 的 照片 中 出 现 了 杂志 上 的 文字 及 色 块 ， 使 画面 变 得 不 太 
干净 。 下 面 将 通过 后 期 处 理 用 “橡皮 擦 工具 ”去 挥 照 片 中 无 用 的 信息 ， 还 原 干净 的 画面 效果 。 


素 材 随 书 资源 \ 素 材 \03\05.jpg 


随 书 资源 \ 源 文件 \03\ 擦 除 商 品 图 像 上 无 
用 的 信息 .psd 


源 文件 


步骤 01 打开 图 像 吸取 颜色 


打开 素材 文件 05.jpg， 可 看 到 背景 中 出 现 了 与 玩具 汽车 不 符 的 文字 ， 在 后 期 处 理 时 需要 用 “橡皮 擦 工具 ”将 其 擦 挥 。 为 了 让 
擦 除 后 的 画面 颜色 更 加 统一 ， 选 择 “吸管 工具 ”， 按 住 Alt 键 不 放 ， 吸 取 鼠 标 单 击 位 置 的 颜色 ， 将 背景 颜色 设置 为 黄色 。 
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步 又 02 使 用 “橡皮 擦 工具 ” 闭 抹 


单 击 工具 箱 中 的 “橡皮 擦 工具 ”按钮 ， 将 鼠标 移 至 照片 右 侧 的 文字 位 置 并 涂抹 ， 可 看 到 涂抹 区 域 的 文字 被 擦 除 并 显示 为 黄色 
效果 。 对 于 汽车 投影 与 背景 相交 的 位 置 ， 为 了 使 擦 除 效 果 更 自然 ， 可 以 在 选项 栏 中 适当 降低 不 透明 度 ， 然 后 进行 涂抹 操作 。 
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步骤 03 ”连续 涂抹 去 除 多 余人 信息 


经 过 反复 的 涂抹 绘制 去掉 了 商品 右 侧 的 文字 。 为 了 让 画面 变 得 更 干 尝 ， 还 可 以 把 画面 下 方 的 彩色 渐变 条 也 去 挥 。 在 选项 栏 
中 重新 把 “不 透明 度 ” 调 整 为 100%， 然 后 在 颜色 条 上 涂抹 ， 完 成 照片 中 多 余 对 象 的 擦 除 操作 。 


不 透明 度 : 100% ~ 全 ” 济 : I00% | (4 


拉 巧 提示 : 选择 擦 除 模 式 


使 用 “橡皮 探 工具 探 除 图 像 时 ， 在 其 选项 栏 的 “模式 ”选项 中 可 以 设置 擦 除 图 像 边缘 的 尖锐 程度 。 默 认 选 择 “ 画 笔 选 
项 ， 此 时 擦 除 的 图 像 边缘 会 根据 设置 的 画笔 笔尖 样式 进行 政变 ; 若 选 择 “铅笔 ”选项 ， 则 擦 去 的 图 像 边缘 会 显得 尖锐 ;， 若 选 
择 “ 块 ” 选 项， 则 橡皮 擦 会 变 成 一 个 方块 进行 擦 除 。 


实例 23 ”修复 轻微 变形 的 丙 品 


拍摄 商品 照片 时 ， 有 时 会 因为 拍摄 的 角度 问题 造成 照片 中 的 商品 出 现 变形 ， 从 而 影响 顾客 对 商品 外 形 的 判断 和 理解 ， 此 时 残 
需要 对 商品 的 外 形 进 行 校正 、 修 复 。 在 Photoshop 中 可 以 用 “ 笠 切 ” “镜头 校正 ”等 命令 相 结 合 的 方式 快速 校正 并 变换 图 像 的 
透视 ， 让 照片 中 的 商品 恢复 正常 的 透视 视 完 。 


素 材 随 书 资源 \ 素 材 \03\06.jpg 


随 书 资源 \ 源 文件 \03\ 修 复 轻 微 变形 的 
商品 .psd 


步骤 01 执行 “ 锐 头 校正 ”命令 校正 图 像 


打开 素材 文件 06jpg， 可 以 明显 看 到 图 像 有 变形 现象 ， 所 以 需要 企 后 期 处 理 时 加 以 修复 。 先 复制 图 层 ， 得 到 “背景 拷贝 ” 医 
层 ， 执 行 “ 滤 镜 > 镜 头 校正 ”菜单 售 令 ， 打 开 “ 镜 头 校正 ”对 话 框 。 在 对 话 框 中 单 击 “ 目 定 ” 按 钮 ， 切 损 至 “ 目 定 ” 选 项 卡 ， 千 
右 拖 撮 “ 移 去 扭曲 ” 滑 块 ， 当 拖 折 至 +16 时 ， 可 以 看 到 变形 的 图 像 得 到 了 修复 。 
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步骤 02 创建 参考 辅助 线 


校正 变形 后 ， 还 要 对 透视 角度 进行 调整 。 在 调整 前 ， 为 了 让 修复 后 的 图 像 透 视角 度 更 理想 ， 按 下 快捷 键 Ctrl+R， 显 示 标 
尺 ， 然 后 拖 岛 参考 线 ， 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 。 由 于 此 照 刻 需 要 对 授 视 角度 进行 修正 ， 因 此 右 击 编辑 框 中 的 图 
像 ， 在 弹出 的 快捷 菜单 中 执行 “ 斜 切 ”命令 。 


旋转 180 度 | I 
顺 时 针 旋 转 90 度 
逆 时 填 旋转 90 度 


水 平 翻转 
备 直 庵 转 


步骤 03” 单 击 并 拖 忠 校正 透视 效果 


将 鼠标 移 至 编辑 框 左上 角 的 控制 点 位 置 ， 单 击 并 同 左 拖 忠 ， 使 商品 的 左 侧 边 缘 与 创建 的 参考 线 呈 现 平行 状态 ;然后 将 鼠标 移 
至 编辑 框 右 侧 ， 使 用 同样 的 方法 拖 忠 右上 角 和 右 下 和 角 的 控制 点 ， 调 整 图 像 的 透视 角度 。 设 置 完成 后 按 下 Enter 键 ， 应 用 变换 效 


步骤 04 ”复制 图 层 更 改 混合 模式 


为 了 让 校正 后 照片 中 的 商品 更 加 突出 ， 按 下 快捷 键 Shift+ Ctrl+Alt+E， 盖 印 可 见 图 层 ， 得 到 “图 层 1”″ 图 层 ， 将 此 图 层 的 混 
合 模 式 调 整 为 “ 滤 色 ”，“ 不 透明 度 ” 设 置 为 40%， 提 高 图 像 的 亮度 ; 再 创建 图 层 蒙 版 ， 选 用 黑色 画笔 在 商品 位 置 涂抹 ， 还 原 图 
像 的 亮度 。 
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实例 24 ”模糊 背景 让 照片 中 的 商品 更 突出 


在 商品 照片 拍摄 的 过 程 中 ， 可 以 利用 相机 的 光圈 设置 模糊 育 景 ， 以 突出 要 表现 的 商品 。 对 于 背景 与 主体 商品 同样 清晰 的 照 
片 ， 则 需要 通过 后 期 处 理 对 背景 进行 模糊 。Photoshop 中 提供 了 多 种 不 同 的 模糊 工具 和 命令 ， 应 用 它们 可 以 完成 照片 的 快速 模 
糊 。 下 面 介 绍 具 体 的 处 理 方法 。 


宗 材 随 书 资源 \ 泰 材 \03\07.jpg 


随 书 资源 \ 源 文件 \03\ 模 糊 育 景 让 照片 中 的 


源 文 件 品 更 突出 .psd 


步骤 01 “复制 图 像 执行 “光圈 模糊 ”命令 


打开 素材 文件 07,jpg， 画 面 要 表现 的 商品 为 重 鞋 ， 但 背景 中 的 图 案 太 多 ， 影 响 了 商品 的 呈现 ， 此 时 可 以 适当 模糊 育 景 。 移 复 
制图 层 , 创建 “背景 拷贝 ”图 层 。 为 了 让 模糊 效果 更 目 然 ， 这 里 选用 “光圈 模糊 ” 渡 镜 模糊 图 像 。 执 行 “ 渡 镜 > 模 糊 画 廊 > 光 轿 
模糊 ”菜单 命令 ,在 打开 的 模糊 画廊 中 显示 了 椭圆 形 光圈 控制 图 钉 。 


步骤 02 调整 模糊 的 沁 围 


为 了 实现 更 准确 的 模糊 处 理 ， 将 刀 标 移 至 椭圆 形 模糊 图 条 上 ， 单 击 并 拖 忠 ， 调 整 椭圆 的 大 小 和 位 置 。 由 于 这 张 照 刻 中 有 了 两 只 
圭 子 ， 所 以 可 以 设置 两 个 模糊 焦点 ， 将 鼠标 移 人 至 另 一 只 鞋子 上 单 击 ， 创 建 另 一 个 模糊 焦点 。 


步骤 03 ”设置 模糊 的 强度 


根据 焦点 位 置 的 鞋子 的 大 小 和 位 置 ， 进 一 步 单 击 并 拖 岛 椭 加 ， 调 整 模糊 的 泡 围 ， 然 后 在 “模糊 工具 ”面板 中 把 “模糊 ” 值 增 
大 ， 设 置 为 20 像 素 ， 以 表现 不 同 的 景深 效果 。 


个 科 懈 移 
路 径 模糊 
和 千 模糊 


步骤 04 运用 “模糊 工具 ”模糊 图 像 


完成 滤 镜 参数 的 调整 后 ， 单 击 “ 确 定 ” 按 钮 ， 模 糊 图 像 。 为 了 让 图 像 的 模糊 区 域 与 清晰 的 主体 部 分 过 渡 更 自然 ， 选 择 “模糊 
工具 ”， 在 选项 栏 中 调整 选项 后 继续 在 育 景 上 涂抹 ， 模 糊 图 像 。 


昭 模式 : 正常 


实例 25 二 商品 妆 得 清 


在 网 店 委 修 中 ， 商 品 图 像 清晰 是 最 基本 也 是 最 重要 的 一 个 要 求 。 网 店 中 所 有 的 商品 都 依靠 图 像 向 顾客 展示 ， 如 果 图 像 不 清 
晰 ， 那 么 顾客 残 不 能 真实 地 了 解 商 品 的 细节 。 因 此 ， 商 品 照片 不 清晰 时 ， 融 需要 提高 其 锅 度 ， 让 它 变 得 清晰 。 下 面 介绍 如 何 快速 
让 模糊 的 图 像 变 得 清晰 。 


素 材 随 书 资源 \ 素 材 \03\08.jpg 


随 书 资源 \ 源 文件 \03\ 让 商品 变 得 清 


源 文 件 。 晰 psd 
步骤 01 打开 图 像 复制 图 层 
打开 素材 文件 08.jpg， 原 照片 因为 锅 化 太 低 ， 茶 具 上 的 花纹 不 是 很 清晰 ， 所 以 要 对 其 进行 锅 化 。 在 锐 化 之 前 ， 先 复制 图 层 ， 


创建 “ 育 景 拷贝 ”图 层 。 


步骤 02 设置 “智能 锐 化 ”选项 


为 了 避免 图 像 因 锐 化 而 出 现 品 点， 这 里 选用 “智能 锐 化 ” 渡 镜 来 锅 化 图 像 。 执 行 “ 滤 镜 > 锅 化 > 智能 锐 化 ”菜单 命令 ， 打 
开 “ 智 能 锐 化 ”对 话 框 ， 对 照 左 侧 预 虎 框 中 的 铝 化 效果 ， 调 整 右 侧 的 锅 化 选项 。 
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步骤 03 ”编辑 图 层 蒙 版 控制 锐 化 沁 围 


设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 锐 化 图 像 。 由 于 只 需要 对 商品 进行 锅 化 ， 因 此 为 “背景 拷贝 ”图 层 湛 加 图 层 蒙 版 ， 然 后 选 
择 “ 画 笔 工 具 ”， 单 击 “ 背 景 拷贝 ”图 层 蒙 版 ， 用 黑色 的 画笔 在 背景 部 分 涂抹 。 为 了 让 画面 呈现 目 然 的 景深 效果 ， 还 可 以 在 选项 
栏 中 适当 降低 不 透明 度 ， 在 茶具 边缘 位 置 涂抹 ， 以 呈现 更 目 然 的 从 清晰 到 模糊 的 过 渡 效 果 。 


步骤 04 使 用 “ 锐 化 工具 ”再 次 锐 化 图 像 


六 


按 下 快捷 键 Shift+Ctrl+Alt+E， 苹 印 可 见 图 层 ， 得 到 “图 层 1” 图 层 。 为 了 使 茶具 中 间 部 分 的 花纹 更 清晰 ， 选 择 “ 锅 化 工 
具 ”， 在 条 具 中 间 位 置 涂抹 ， 铝 化 图 像 。 


由 


第 4 草 ”商品 影 调 的 调控 技术 


对 于 商品 照片 来 讲 ， 太 上 暗 或 太 亮 都 不 利于 顾客 查看 并 了 解 商 品 信息 及 其 主要 特征 。 因 此 ， 为 了 让 商品 形象 更 完美 地 展现 在 顾 
客 面 前 ， 在 修复 商品 瑕 意 之 后 ， 还 要 对 画面 的 影 调 进行 调整 ， 通 过 提 亮 偏 瞳 的 图 像 、 降 低 偏 亮 的 图 像 或 增强 对 比 修复 偏 灰 的 图 像 
来 提高 照片 质量 。 在 Photoshop 中 可 以 应 用 “自动 对 比 度 ” “曝光 度 ” “曲线 ”等 命令 来 调整 照片 的 明亮 度 、 对 比 度 等 ， 让 照 
片 恢复 到 最 上 自然、 理想 的 状态 ， 更 准确 地 表现 商品 形象 。 


26 ”快速 修复 偏 灰 的 商品 图 像 
27 ”让 曝光 不 足 的 商品 图 像 整 体 变 亮 
28 ”快速 调整 商品 的 对 比 度 
29 ”精细 调整 商品 的 对 比 度 
30 ” 目 由 调整 商品 不 同 明暗 区 域 的 亮度 
31 ”修复 逆光 担 摄 的 商品 图 像 
32 ”针对 商品 照片 中 的 高 光 进 行 提 亮 


33 ”加 深 商 品 的 暗部 区 域 


实例 26 ”快速 修复 俩 灰 的 商品 图 像 


当 提 摄 的 商品 图 像 对 比 度 不 够 时 ， 画 面 会 显得 整体 偏 灰 。 对 于 这 类 情况 ， 可 以 使 用 Photoshop 中 的 “自动 对 比 度 ” 命 令 快 
速 校正 。 本 实例 将 通过 详细 的 操作 步 又 介绍 使 用 “自动 对 比 度 ” 命 令 校 正 照 刻 的 过 程 。 


素 材 随 书 资源 \ 素 材 \04\01.jpg 


随 书 资源 \ 源 文件 \04\ 快 速 修 复 偏 灰 的 


源 文 件 商品 图 像 .psd 


步骤 01 打开 图 像 复 制 “ 育 景 ”图 层 


打开 泰 材 文 件 01.jpg， 这 张 照 片 要 表现 的 商品 为 芭比 娃娃 ， 但 是 因为 对 比 不 足 ， 男 面 偏 灰 ， 所 以 需要 加 强 对 比 。 先 把 “ 背 
景 ”图 层 复制 ,创建 “背景 拷贝 ”图 层 。 


确保 “背景 拷贝 ”图 层 为 选中 状态 ,执行 “图 像 > 目 动 对 比 度 ”菜单 命令 ,可 以 看 到 加 强 了 对 比 ， 双 比 娃娃 显得 更 加 可 爱 。 


Shift+Ctrl+B 


步骤 03 ”选择 并 复制 图 像 


为 了 让 芭比 娃娃 的 五 官 更 加 立体 ， 再 选择 “椭圆 选 框 工具 ”， 设置 “ 漳 化 ” 值 为 200 像 泰 ， 在 芭比 娃娃 的 脸 部 单 击 并 拖 忠 妃 
标 ， 创 建 选区 。 按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 图 像 ， 生 成 “图 层 1” 图 层 。 


= i 


羽化 : 200 像素 


， 一 


步骤 04 使 用 “USM 锐 化 ” 滤 镜 锐 化 五 官 


执行 “ 滤 镜 > 锐 化 >USM 锐 化 ”菜单 命令 ,打开 “USM 锐 化 ”对 话 框 。 在 对 话 框 中 调整 “数量 ”和 “半径 ” 值 , 设置 后 单 
击 “确定 ”按钮 ， 应 用 滤 镜 ， 得 到 更 加 清晰 的 五 官 效果 。 


| 


| 半径 (N): 4.0 “| 像素 


Er 


靖 值 (D): 0 | 色 阶 


曝光 度 会 直接 影响 图 像 的 明亮 程度 ， 商 品 照片 曝光 过 度 会 导致 商品 高 光 部 分 的 细 节 丢失， 而 曝光 不 足 可 能 会 导致 商品 阴影 部 
分 的 细节 丢失 。 本 实例 将 运用 “曝光 度 ”命令 快速 修复 曝光 不 足 的 图 像 ， 展 现 更 精细 的 商品 细节 。 


人 


素 材 随 书 资源 \ 素 材 \04\02.jpg 


随 书 资源 \ 源 文件 \,04\ 让 曝光 不 足 的 商 


源 文 件 。 品 图 像 整体 变 亮 psd 


打开 素材 文件 02.jjpg， 可 以 看 出 这 是 一 张 曝 光 不 足 的 照片 ， 整 个 画面 太 暗 ， 因 此 需要 提 亮 图 像 。 单 击 “ 调 整 ” 面 板 中 的 “了 曝 
光度 ”按钮 图 ， 创 建 “ 曝 光度 1” 调整 图 层 。 


Fs A 


在 打开 的 “属性 ”面板 中 将 “曝光 度 ” 滑 块 向 右 拖 忠 ， 增 大 曝光 度 值 ， 提 亮 图 像 。 


增加 曝光 度 值 以 后 ， 友 现 图像 对 比较 强 ， 中 间 调 部 分 略微 俩 暗 。 因 此 ， 把 “ 灰 度 系 数 校正 ” 滑 块 癌 石 拖 擅 至 1.15 位 置 ， 此 时 
可 以 看 到 削弱 了 对 比 ， 图 像 变 得 更 有 层次 了 。 


调整 曝光 度 后 图 像 虽 然 变 亮 了 ， 但 是 噪点 也 增加 了 ， 所 以 还 需要 做 降 噪 处理。 按 下 快捷 键 Shift+Ctrl+Alt+E， 苹 印 可 见 图 
层 ， 得 到 “图 层 1” 图 层 。 执 行 “ 滤 镜 > 杂 色 > 减少 杂 色 ”菜单 命令 ,打开 “减少 杂 色 ”对 话 框 。 在 对 话 框 中 调整 相关 参数 ， 单 
“确定 ”按钮 ， 去 除 噪点 。 


L | 
职 消 
| 本 驳 (PP] 
| , 基本 (6) 门 高 孝 (M) 


设置 : | 里 认 值 :| 页 | 亩 
强 雇 [T): 8 

恒 留 重 节 (Dj: 30 名 

柄 少 鹿 贸 扣 :| 一 | 申 

羽化 竹 节 [Hi | 一 | 县 


烷 击 徊 EG 址 自然 发 司 ] 


实例 28 ”快速 调整 商品 的 对 比 度 


在 对 照片 进行 明暗 调整 的 过 程 中 ， 要 先 观 察 照 片 整体 的 明暗 效果 。 在 Photoshop 中 可 以 使 用 “亮度 /对 比 度 ” 调 整 对 比较 纶 
的 图 像 ， 也 可 以 调整 图 像 的 亮度 ， 修 复 轻 微 偏 瞳 或 偏 亮 的 图 像 。 本 实例 将 使 用 “亮度 /对 比 度 ” 命 令 调整 商品 的 对 比 度 ， 创 建 更 
有 层次 感 的 画面 效果 。 


素 材 随 书 资源 \ 素 材 \04\03 .jpg 


随 书 资源 \ 源 文件 \04\ 快 速 调整 商品 的 


源 文件 对 比 度 .psd 


步骤 01 创建 “之 度 / 对 比 度 1” 调 整 图 层 


打开 素材 文件 03.jpg， 可 以 看 到 照片 因 对 比 不 强 ， 瓶 子 的 通 透 感 不 强 。 单 击 “ 调 整 ”面板 中 的 “亮度 /对 比 度 ” 按 钮 加 ， 新 
建 “ 亮 度 /对 比 度 1” 调 整 图 层 。 


步骤 02 蛙 击 “ 目 动 ”按钮 


为 了 快速 调整 图 像 ， 增 强 对 比 效果 ， 单 击 “ 属 性 ”面板 中 的 “自动” 按钮， 可 看 到 系统 自动 完成 了 “对 比 度 ” 值 的 调整 。 


池 - 四 高度 岂 比 度 


对 比 度 : 


使用 旧 有 所 


又 03 ”设置 选项 调整 图 像 


\h 


经 过 上 一 步 操 作 ， 调 整 了 照片 的 对 比 度 ， 但 是 感 党 对 比 还 是 不 够 蝇 。 因 此 继续 向 右 拖 息 “对 比 度 ” 滑 块 ， 当 拖 蝶 至 60 时 ， 
可 看 到 照片 的 对 比 变 得 更 强 了 。 表 向 右 拖 忠 “亮度 ” 滑 块 ， 提 亮 偏 暗 的 图 像 ， 得 到 层次 更 为 分 明 的 商品 照片 。 


oa 
:四 高度 有 比 度 


合用 旧版 


技巧 提示 : 即时 得 看 调整 效果 


使 用 “亮度 /对 比 度 ” 调 整 照片 的 明暗 时 ， 如 果 不 注意 细节 的 处 理 ， 则 很 容易 忽略 图 像 中 部 分 存在 的 色彩 ， 造 成 细节 的 丢 
失 。 因 此 使 用 它 调整 图 像 时 ， 应 该 色 选 “预览 复 选 框 ， 以 便 即 时 查看 应 用 调整 后 的 图 像 效 果 。 此 外 ， 在“ 亮度/ 对比度 ”选项 


下 还 包括 “使 用 旧版 ” 复 选 框 ， 义 选 该 复 选 框 可 以 使 用 更 早 版 本 中 的 “亮度 /对 比 度 ” 功 能 来 调整 图 像 。 


前 面 的 实例 介绍 了 使 用 “亮度 /对 比 度 ” 快 速 调整 商品 的 对 比 度 ， 下 面 将 介绍 如 何 精 细 调 整 图像 的 对 比 度 。 在 Photoshop 中 
要 对 照片 的 对 比 度 做 精细 调整 ， 则 可 以 使 用 “曲线 ”命令 来 实现 。 用 户 可 以 控制 曲线 中 任意 一 点 所 对 应 位 置 的 影 调 ， 能 实现 较 小 
汽 围 内 图 像 明暗 的 调整 ， 使 调整 后 的 图 像 具 有 更 多 的 层次 。 


素 材 随 书 资源 \ 素 材 \04\04.jpg 


随 书 资 源 \ 源 文件 \04\ 精 细 调 整 商 品 的 


源 文 件 对 比 度 .psd 


打开 素材 文件 04.jpg， 这 是 一 张 毛 衣 细 节 展 示 照 片 ， 原 图 像 对 比较 弱 ， 衣 服 的 细节 及 针织 纹理 都 不 是 很 清晰 。 单 击 “ 调 
整 ” 面 板 中 的 “曲线 ”按钮 国 ,创建 “曲线 1” 调 整 图 层 ，。 


调整 
昌江 


沪 册 节 四 V 


Fs A 


由 于 这 张 照片 整体 偏 暗 ， 为 了 让 其 亮 部 变 得 更 加 明亮 ， 在 打开 的 “属性 ”面板 中 ， 先 在 曲线 右上 部 分 单 击 ， 添 加 一 个 曲线 控 
制 点 ， 然 后 向 上 拖 电 该 控制 点 ， 提 高 高 光 部 分 的 亮度 . 


下 志 Www 


步骤 03 ”设置 曲线 加 强 对 比 


为 了 加 强 对 比 效果 ， 在 提 亮 高 光 后 ， 还 可 以 降低 上 暗部 的 亮度 。 在 曲线 左下 角 单 击 ， 添 加 另 一 个 曲线 控制 点 ， 然 后 向 下 拖 忠 该 
控制 点 ， 使 阴影 部 分 变 得 更 暗 。 


设置 曲线 进一步 提 亮 图 像 


步 又 04 
经 过 前 面 的 操作 ， 友 现 衣 服 的 层次 感 变 丰 富 了 ， 但 是 图 像 还 是 偏 瞳 。 因 此 创建 “曲线 2” 调 整 图 层 ， 在 曲线 的 中 间 位 置 单 击 
亮 后 由 于 衣服 上 的 高 光 部 分 有 点 曝光 过 度 了 ， 所 以 用 黑色 男 笔 在 该 区 域 涂抹 ,还原 图 像 的 影 


并 向 上 拖 蝶 曲线 ， 提 亮 中 间 调 。 提 
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实例 30 ”自由 调整 商品 不 同 明暗 区 域 的 亮度 


对 于 一 张 照片 来 讲 ， 通 常 分 为 亮 部 区 域 、 中 间 调 区 域 和 暗部 区 域 ， 如 果 需 要 分 别 对 这 些 区 域 进行 亮度 的 调节 ， 则 可 以 使 用 
Photoshop 中 的 “ 色 阶 ”命令 。“ 色 阶 ” 通 过 改变 照片 中 像素 的 分 布 来 控制 图 像 的 亮度 。 使 用 “ 色 阶 ”命令 调整 商品 图 像 时 ， 
还 可 以 借助 色 阶 直 方 图 观察 需要 调整 的 图 像 的 学 围 ， 从 而 获得 更 准确 的 曝光 效果 。 


素 材 随 书 资源 \ 素 材 \04\05.jpg 


随 书 资源 \ 源 文件 \04\ 自 由 调整 商品 不 
源 文件 同 明暗 区 域 的 亮度 .psd 


下 鼎 


步骤 01 创建 “ 色 阶 1” 调 整 图 层 


打开 率 材 文件 05.jpg， 由 于 这 张 照片 明 显 翁 蜡 ， 所 以 需要 对 它 的 腕 度 进 行 调整 。 为 了 让 调整 的 图 像 更 有 层次 ， 这 里 可 以 使 


用 “ 色 阶 ”分 别 对 图 像 的 中 间 调 和 高 光 进行 调整 。 单 击 “ 调 整 ” 面板 中 的 “ 色 阶 ”按钮 回 ， 新 建 “ 色 阶 1” 调 整 图 层 。 


步骤 02 拖 蝶 滑 块 提 亮 高 光 部 分 


打开 “属性 ”面板 ， 在 面板 中 可 以 看 到 图 像 高 光 部 分 的 像素 较 少 


， 说 明 此 图 像 曝光 不 足 。 单 击 代表 高 光 部 分 的 日 色 滑 块 ， 辣 
左 拖 忠 ， 提 亮 高 光 部 分 ， 恢 复 高 光 细 忆 。 


步骤 03 ” 提 亮 中 间 调 


Cc 


是 亮 高 光 后 ， 发 现 图 像 整体 明显 偏 瞳 。 所 以 表单 击 代表 中 间 调 区 域 的 灰色 滑 块 ， 辣 左 拖 忠 该 滑 块 ， 提 高 中 间 调 部 分 的 图 像 亮 
完成 图 像 亮 度 的 调整 。 


尊 


反 巧 提示 : “ 色 阶 ”中 的 目 动 校正 


“ 色 阶 ” 对 话 框 中 提供 了 一 个 “选项 ”按钮 ， 单 击 该 按钮 ， 即 可 打开 “自动 颜色 校正 选项 ”对 话 框 。 在 该 对 话 框 中 可 以 设置 
黑色 像素 和 和 白色 像素 的 比例 ， 从 而 控制 图 像 的 明 瞳 对 比 。 此 外 ， 在 “自动 颜色 校正 选项 ”对 话 框 中 还 提供 了 多 种 调整 图 像 整 体 色 


调 范围 的 算法 。 其 中 ，“ 增 强 单 色 对 比 度 - 一 前 切 所 有 通道 ， 使 高 光 显 得 更 亮 、 暗 调 显 得 更 上 暗 的 同时 ,保留 图 像 整 体 色调 关 
系 ，“ 自 动 对 比 度 ” 命 令 即 采用 此 算法 调整 明 瞳 对 比 ; “增强 每 通道 的 对 比 度 ” 可 最 大 化 每 个 通道 中 的 色调 范围 ， 以 产生 更 明显 
的 校正 效果 ， 它 与 “自动 色 阶 ”命令 的 算法 一 致 ; “查找 深 色 与 浅 色 ” 可 查找 图 像 中 平均 最 亮 和 最 上 暗 的 像素 ， 并 用 它们 进行 最 小 
化 剪 切 的 同时 最 大 化 对 比 度 。 


某 毕 时 候 为 了 突出 商品 的 外 形 轮 廓 ， 会 采用 逆光 的 方式 进行 拍摄， 这 样 担 出 来 的 照 卢 很 容易 出 现 暗部 细节 损失 、 细 节 不 清晰 
的 情况 ， 此 时 可 以 用 “阴影 /高 光 ” 命 令 加 以 修复 。 本 实例 将 使 用 “阴影 /高 光 ”命令 调 整 送 光 提 摄 的 图 像 ， 显 示 更 多 的 照 厂 细 


十 上 
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款 材 随 书 资源 \ 素 材 \04\06.jpg 


随 书 资源 \ 源 文件 \04\ 修 复 逆 光 拍 摄 的 商品 


源 文 件 图 像 .psd 


打开 率 材 文件 06jpg， 可 以 友 现 照片 中 相机 镜头 的 阴影 部 分 太 蜡 ， 使 得 一 些 细节 都 没有 了 ， 因 此 需要 在 后 期 处 理 时 加 以 修 
选择 “背景 ”图 层 ， 将 其 拖 电 至 “创建 新 图 层 ”按钮 茵 中 ， 释 放 鼠 标 ， 复 制图 层 ， 得 到 “背景 拷贝 ”图 层 。 


i OT 
< ”不 ] 委 明度 : 100% 


确保 “背景 拷贝 ”图 层 为 选中 状态 ,执行 “图 像 > 调 整 > 阴 影 / 高 光 ” 有 菜单 命令 ， 打开“ 阴影/ 高光” 对 话 框 。 在 对 话 框 中 上 默 
认 设 置 阴影 “数量 ”为 35%， 发 现 图 像 阴 影 部 分 还 是 大 暗 ， 因 此 同 右 拖 蝶 阴影 “数量 ” 滑 块 。 当 拖 岛 至 50% 时 ， 图 像 阴影 变 得 明 


B wishss. 
a 
数量 (入): Eg | 9a 
| ”取消 
人 | 载 入 0)... 
i 一 存 全 (5 
| 显示 更 当选 项 [0) [| 预览 (P) 


步骤 03 ”对 更 多 选项 进行 调整 


为 了 让 调整 的 图 像 更 加 出 色 ， 勾 选 “ 阴 影 /高 光 ” 对 话 框 中 的 “显示 更 多 选项 ” 复 选 框 ， 显 示 更 多 的 选项 设置 ;然后 将 “ 关 O 
色 ” 滑 块 向 左 拖 蝶 至 -100 位 置 ， 去 挥 颜色 ， 让 田 面 色彩 更 为 干 当 ， 再 向 右 拖 忠 “中 间 调 ” 滑 块 ， 蛙 击 “ 确 定 ” 按 钮 ， 提 高 中 间 
调 部 分 的 亮度 。 


调整 
颜色 (GO: 人 -100 
中 间 调 (M): A +20 | 
修 前 黑色 (B): 0.01 | % 
修剪 白色 (W): [0.01 | % 
存储 默认 值 (V)_ 


Y| 显示 更 多 磷 基 (0) 


步骤 04 使 用 “USM 锐 化 ” 滤 镜 锐 化 图 像 


提 亮 图 像 后 发 现 相机 镜头 不 太 清 晰 ， 因 此 执行 “ 滤 镜 > 锐 化 >USM 锐 化 ”菜单 命令 ， 打 开 “USM 锐 化 ”对 话 框 。 在 对 话 框 
中 调整 锅 化 选项 ， 单 击 “ 确 定 ” 按 钮 ， 铝 化 图 像 ， 得 到 更 清晰 的 细节 效果 。 


盖 值 (T): | 0 


调整 商品 影 调 时 ， 如 果 需 要 对 它 的 一 小 部 分 进行 提 亮 ,最 方便 有 效 的 方法 束 是 使 用 “ 减 淡 工 具 ” 来 完成 。“ 减 淡 工 具 ” 可 以 
根据 设置 的 学 围 ， 提 亮 照 片 中 的 阴影 、 中 间 调 和 高 光 等 部 分 。 本 实例 为 了 突出 中 间 闪 亮 的 项 饰 ， 将 使 用 “ 减 淡 工 具 ” 对 项 链 进行 
提 之 ,得 到 更 次 眼 的 效果 。 


泰 材 随 书 资源 \ 素 材 \04\07.jpg 


随 书 资源 \ 源 文件 \04\ 针 对 商品 照片 中 


源 文件 的 高 光 进 行 提 亮 .psd 


打开 素材 文件 07.jpg， 为 了 突出 画面 中 间 的 项 链 ， 可 以 降低 背景 区 域 的 亮度 。 执 行 “ 选 择 > 色彩 范围 ”菜单 命令 , 打开 “ 色 
彩 泄 围 ” 对 话 框 。 由 于 这 里 需要 对 较 蜡 的 背景 进行 调整 ， 因 此 选择 “阴影 ”选项 ， 单 击 “ 确 定 ” 按 钮 ， 创 建 选区 ， 选 择 阴 影音 


入 
o 


选择 (C): | 国 阴影 
检测 人 脸 (D 
颜色 容 差 (F): 


新 建 “ 曲 线 1” 调 整 图 层 ， 这 里 需要 降低 背景 阴影 的 亮度 ， 所 以 在 “属性 ”面板 中 单 击 并 向 下 拖 外 曲线 。 


经 过 上 一 步 操 作 ， 友 现在 降低 背景 图 像 亮 度 的 同时 ， 也 降低 了 中 间 项 链 阴影 部 分 的 亮度 。 因 此 单 击 “曲线 1” 图 层 蒙 版 ， 用 
黑色 加 笔 在 不 需要 调整 的 项 链 位 置 涂抹 ,还 原 图 像 之 度 ， 表 用 日 色 男 笔 在 背景 上 涂抹 ， 将 整个 背景 都 涂抹 为 日 色 。 


为 了 展现 更 加 炊 眼 的 项 链 效 果 ， 按 下 快捷 键 Shift+Ctrl+Alt+E， 芋 印 可 见 图 层 ， 选择 “ 减 淡 工 具 ”， 在 选项 栏 中 将 范围 设置 
为 “高 光 ”，“ 了 曝光 度 ” 设 置 为 20%， 然 后 在 项 链 上 涂抹 ， 提 亮 高 光 部 分 。 


在 Photoshop 中 打开 商品 照片 后 ， 如 果 需 要 对 图 像 进 行 局 部 加 深 处 理 ， 则 可 以 使 用 “加 深 工具 ”控制 加 深 的 范围 ， 并 通过 
画笔 的 涂抹 加 深 上 暗部 区 域 。 


素 材 随 书 资源 \ 素 材 \04\08.jpg 


随 书 资源 \ 源 文件 \04\ 加 深 商品 的 暗 音 


源 文件 区 域 .psd 


调整 参数 ,设置 后 沿 照 片 边缘 单 击 并 拖 蝶 姐 标 ， 绘 制 选区 ， 执 行 “选择 > 反选 ”菜单 命令 ， 选 择 边缘 部 分 。 


步骤 02 调整 “ 色 阶 ”添加 坚 影 


新 建 “ 色 阶 1” 调 整 图 层 ， 打 开 “ 属 性 ”面板 。 这 里 需要 降低 边缘 部 分 的 图 像 的 亮度 ， 因 此 单 击 并 向 右 拖 忠 面板 中 的 灰色 滑 
块 ， 降 低 选 区 内 图 像 的 碾 度 ， 为 图 像 添加 早 影 效果 。 


按 下 快捷 键 Shift+ Ctrl+Alt+E， 和 兰 印 可 见 图 层 ， 得 到 “图 层 1” 图 层 。 为 了 让 画面 中 间 的 玩具 竹 对 比 变 强 ， 选 择 “ 加 深 工 
具 ”， 人 在 选项 栏 中 设置 学 围 为 “阴影 ”，“ 曝 光度 ”为 10%， 在 车 身上 涂抹 ， 加 深 图 像 。 


范围 : 阴影 曝光 度 : 10% 


趟 瑞明 度 :， 100% 攻 
a 中 加 ”填充 : 100% = 


继续 使 用 “加 深 工具 ”涂抹 并 加 深 图 像 。 最 后 创建 “ 色 阶 2” 调 整 图 层 ， 打 开 “ 属 性 ”面板 ， 在 面板 中 向 左 适 当 抑 是 白色 滑 


块 ， 提 高 高 光 部 分 的 党 度 。 


第 5 章 ” 商品 照片 调 色 秘 发 


由 于 受到 环境 光线 和 日 平衡 设置 不 当 的 影响 ， 担 摄 出 来 的 商品 照片 的 色彩 会 和 人 眼看 到 的 效果 不 同 ， 因 此 ， 后 期 对 商品 照片 
的 色彩 修复 与 美化 区 显得 尤为 重要 。 商 品 照 片 中 的 商品 赢 色 是 帮助 顾客 判断 、 决 定 是 否 购买 商品 的 关键 因素 ， 因 此 ， 人 在 对 商品 照 
片 进行 调 色 时 ， 不 但 需要 对 色彩 进行 美化 ， 还 需要 较为 准确 地 表现 商品 的 色彩 特征 ， 以 免 为 顾客 带 来 错误 的 视觉 感受 ， 从 而 引起 
一 些 不 必要 的 麻烦 。 


34 ”快速 修复 偏 色 的 商品 照片 

35 ”快速 提高 商品 照片 的 颜色 鲜艳 度 
36 ”突出 商品 照片 的 单个 颜色 

37 调 世 商品 照片 的 冷暖 感 

38 目 由 更 改 照片 中 的 商品 颜色 
39 ”修复 偏 伶 或 偏 暖 的 商品 照片 
40 ”突出 商品 图 像 的 局 部 增色 

41 让 商品 的 色彩 变 得 丰富 

42 ”商品 照片 中 的 无 彩色 应 用 


43 ”让 一 组 照片 中 的 商品 颜色 更 统一 


类 
El 
EE 
Ea 
Dy 
中 
下 


实例 34 ”快速 修 


偏 色 是 商品 摄影 中 经 常会 遇 到 的 问题 ,一旦 照片 偏 色 ， 束 会 给 顾客 市 来 视 完 上 的 误 秦 ， 从 而 造成 不 必要 的 麻烦 。 所 以 对 于 网 
店 中 用 于 商品 展示 的 照片 来 说 ， 需 要 对 其 颜色 进行 校正 。 本 实例 是 对 偏 色 的 糖果 使 照 片 进行 颜色 校正 。 下 面 通 过 具体 的 操作 步 又 
讲解 如 何 快速 修复 偏 色 的 商品 照片 。 


” 
® 


素 材 随 书 资源 \ 素 材 \05\01.jpg 


随 书 资源 \ 源 文件 \05\ 快 速 修 复 偏 色 的 
商品 照片 .psd 


源 文件 


步骤 01 复制 图 层 
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册 
只 
河 
茜 


打开 素材 文件 01.jpg， 友 现 原 照片 受到 提 摄 环境 的 影响 ， 画 面 偏 暖 色 ， 需 要 通过 后 期 处 理 加 以 还 原 。 选 择 “ 背 景 


| 


此 图 层 拖 昌 至 “创建 新 图 层 ” 按 钮 看 是， 复制 图 层 ， 得 到 “背景 拷贝 ”图 层 。 


已 由 


二 站 站 
10096 


:100% 


步骤 02 执行 “上 自动 色调 ”命令 


先 对 照片 的 色调 进行 快速 校正 。 执 行 “图像 > 目 动 色调 ”菜单 命令 ,可 以 看 到 照片 的 颜色 得 到 了 一 定 的 修复 。 


Shi 和 十 交 | 二 


) Alt+Shift+Ctrl+L 
自动 额 色 (O) shift+ctrl+B 


上 


步骤 03 ”执行 “上 自动 颜色 ”命令 


为 了 让 照片 中 糖果 使 的 颜色 更 接近 于 实物 ， 还 需要 进一步 对 颜色 进行 校正 。 执 行 “图像 > 目 动 颜色 ”菜单 命令 ,可 以 看 到 照 
片 中 的 商品 颜色 呈现 出 了 最 自然 的 状态 。 


图 像 四 。” 图 层 (L) 文字 (Y) ”选择 (9) 
模式 .(M) 》 
请 束 山 
宇 动 色调 (NN) Shift+Ctrl+L 


自动 对 比 度 (U) Alt+Shift+Ctr|+L 
自动 颜色 (O 〇 ) Shitt+Ctrl+B 


扩 巧 提示 : “ 目 动 色调 ”和 “ 目 动 颜色 ” 


自动 色调 ”命令 可 以 理解 为 自动 色 阶 ， 它 是 将 红色 、 绿 色 和 蓝 色 3 个 通道 的 色 阶 分 布 扩展 至 全 色 阶 范围 。 通 过 此 命令 可 以 
增加 图 像 色彩 的 对 比 度 ， 但 可 能 会 造成 图 像 偏 色 。 “自动 颜色 命令 通过 搜索 图 像 来 标示 阴影 、 中 间 调 和 高 光 ， 从 而 调整 图 像 的 
对 比 度 和 颜色 ， 以 达到 校正 颜色 的 目的 。 “自动 颜色 ”命令 可 以 自动 调整 照片 中 最 亮 的 颜色 和 最 瞳 的 颜色 ， 并 将 照片 中 的 白色 提 
高 到 最 高 值 255， 将 黑色 降低 至 最 低 值 0， 同 时 将 其 他 颜色 重新 分 配 ， 避 免 照片 出 现 偏 色 。 


实例 35 ”快速 提高 商品 照 厂 的 闫 色 鲜 攀 度 


在 商品 照片 中 ， 颜 色 的 鲜艳 程度 决定 了 画面 的 美观 度 。 如 果 扣 摄 照片 中 的 商品 颜色 非常 暗淡 ， 则 肯定 难以 激 友 顾客 的 购买 谷 
望 。 因 此 ， 在 后 期 处 理 时 可 以 根据 要 表现 的 商品 的 特 上 各 ， 对 颜色 暗淡 的 照片 进行 增色 。 本 实例 将 通过 “ 目 然 饱和 度 ” 快 速 提 高 照 
片 的 颜色 鲜艳 度 。 


素 材 随 书 资源 \ 素 材 \05\02.jpg 


随 书 资 源 \ 源 文件 \05\ 快 速 提高 商品 照 


源 文件 片 的 颜色 鲜艳 度 .psd 


步骤 01 创建 “上 自然 饱和 度 1” 调 整 图 层 


打开 素材 文件 02.jpg， 可 以 看 到 图 像 中 鞋子 的 颜色 很 瞳 痰 ， 没 有 将 鞋子 的 特点 表现 出 来 ， 因 此 在 后 期 处 理 时 需要 提高 其 鲜艳 
度 。 为 了 方便 调整 或 设置 参数 ， 单 击 “ 调 整 ”面板 中 的 “自然 饱和 度 ” 按钮 图 ， 创 建 “自然 饱和 度 1” 调 整 图 层 。 


打开 “属性 ”面板 ， 这 里 需要 提升 照片 的 头 色 鲜艳 度 ， 因 此 先 单 击 “ 目 然 饱 和 度 ” 选 项 下 的 交 块 ， 并 将 此 滑 块 拖 岛 至 最 大 数 
值 。 设 置 后 照片 中 鞋子 的 颜色 鲜艳 度 得 到 了 一 定 的 提高 ， 但 是 还 不 够 ,为 了 让 颜色 变 得 更 加 吸引 人 ， 表 适当 向 右 拖 忠 “饱和 
度 ” 滑 块 ， 表 次 增强 颜色 ，。 


自然 饱和 度 : +100 


饱和 度 : 


步骤 03 ”编辑 图 层 壹 版 


经 过 上 一 步 操 作 ， 可 以 友 现 不 但 调整 了 图 像 中 鞋子 的 颜色 ， 同 时 背景 的 颜色 也 变 得 更 鲜艳 了 ， 为 了 突出 照片 中 的 鞋子 主体 ， 
可 对 背景 颜色 进行 还 原 。 单 击 “ 目 然 饱 和 度 1” 图 层 蒙 版 ， 将 前 景色 设置 为 黑色 ， 按 下 Alt+ Delete 组 合 键 ， 将 蒙 版 填充 为 黑色 ,， 
隐藏 所 有 的 调整 效果 ; 再 把 前 景色 设置 为 日 多， 选择 “画笔 工具 ”， 人 在 画面 中 的 鞋子 部 分 涂抹 ， 经 过 反复 涂抹 鞋子 ， 得 到 了 鲜艳 
的 鞋子 效果 。 


技巧 提示 : 调整 照 厂 洪 色 


用 “自然 饱和 度 ”调整 照片 颜色 时 ， 要 注意 观察 照片 的 颜色 ， 如 果 调 整 的 参数 过 大 ， 则 可 能 会 使 照片 变 得 过 于 鲜艳 ， 出 现 溢 
色 的 情况 。 在 Photoshop 中 ， 可 以 使 用 拾 色 器 或 “颜色 ”面板 即时 观察 图 像 调整 的 效果 。 如 果 图 像 有 溢 色 的 情况 ， 则 在 颜色 块 穷 
边 会 显示 一 个 警示 图 标 盘 ， 此 时 就 需要 对 颜色 做 进一步 调整 ， 降 低 颜 色 饱 和 度 ， 直 到 警示 图 标 熏 消 失 。 


实例 36 ”突出 商品 照片 的 单个 赢 色 


当 需 要 突出 商品 的 某 个 特定 颜色 时 ， 可 以 用 Photoshop 中 的 “色相 /饱和 度 ” 功 能 ， 调 整 这 个 颜色 的 色相 、 饮 和 度 及 明度 ， 
从 而 突显 照片 主体 ， 让 要 表现 的 商品 形象 更 生动 。 


素 材 随 书 资 源 \ 素 材 \05\03.jpg 


随 书 资源 \ 源 文件 \05\ 突 出 商品 照片 的 
源 文件 单个 颜色 .psd 


步骤 01 创建 “色相 /饱和 度 1” 调 整 图 层 


打开 素材 文件 03jpg， 单 击 “ 调 整 ” 面 板 中 的 “色相 /饱和 度 ” 按 钮 国 ， 新建 “色相 /饱和 度 1” 调 整 图 层 ，。 


重 


江山 困 四 叉 
SEE EE 
加 加 加 回国 


打开 “属性 ”面板 ， 由 于 此 处 是 要 增强 化 妆 品 的 颜色 ， 因 此 在 “编辑 ”下 拉 列 表 框 中 选择 “红色 ”选项 ， 确 定 要 调整 的 颜色 
汽 围 。 设 置 后 单 击 并 向 右 拖 忠 “饱和 度 ” 滑 块 。 


上 色相 /饱和 度 加 KE 色相 /饱和 度 


Mri: 冉 值 天 & :有 证 
ES 此 ”红色 


步骤 03 ”继续 选择 并 设置 颜色 


续 进行 颜色 的 调整 ， 为 了 让 化 妆 品 盖子 颜色 更 统一 ， 单 击 “ 编 辑 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 下 拉 列 表 中 选择 “洋红 ” 
项 ， 然 后 向 右 拖 忠 “饱和 度 ” 滑 块 。 经 过 设置 ， 在 图 像 窗口 中 会 看 到 调整 后 的 效果 。 


Ne 


二 EJ 色相 / 泡 各 度 


wg 区 站 色相 / 钨 和 度 


jh: ! 目 定 


步骤 04 用 “ 色 阶 ” 提 亮 高 光 


调整 颜色 后 ， 感 党 照片 亮度 不 够 ,图像 显 得 不 太 干 净 。 创 建 “ 色 阶 1” 调 整 图 层 ， 打开“ 属性 ”面板 ， 为 了 突出 中 间 的 化 妆 
品 ， 可 以 把 背景 提 亮 。 单 击 并 向 左 拖 忠 日 色 交 块 ， 提 亮 高 光 部 分 。 


技巧 提示 : 还 原 调整 效果 


用 “色相 /饱和 度 ”调整 颜色 后 ， 如 果 对 设置 的 调整 参数 或 图 像 效 果 不 满意 ， 可 通过 恢复 默认 值 将 图 像 还 原 至 未 调整 前 的 效 
果 。 单 击 “ 预 设 ” 下 拉 按 钮 ， 在 展开 的 下 拉 列 表 中 选择 “默认 值 ”选项 即 可 。 


实例 37 调 古 商品 照 三 的 冷暖 感 


在 调整 商品 照片 的 色彩 时 ， 还 可 以 在 后 期 调 色 过 程 中 更 改 照片 的 色调 ， 赋 予 画面 全 新 的 色彩 ， 让 照片 的 色彩 表现 更 独特 ， 使 
其 更 符合 商品 所 要 传递 的 思想 和 情感 。 本 实例 将 通过 具体 的 操作 来 讲解 如 何 调节 商品 照片 的 冷暖 感 ， 打 造 当 下 网 店 流行 的 色调 效 


向 


素 材 随 书 资源 \ 素 材 \05\04.jpg 


随 书 资源 \ 源 文件 \05\ 调 节 商 品 照片 的 
冷暖 感 .psd 


步骤 01 设置 “中 间 调 ”选项 


A 单 击 “ 调 整 ”面板 中 的 “色彩 平衡 ”按钮 国 ， 新 建 “ 色 彩 平衡 1” 调 整 图 层 。 原 照片 要 表现 的 商品 为 
， 为 了 营造 氛围 ， 可 以 增强 暖色 ， 因 此 在 “属性 ”面板 中 将 “青色 、 红 色 ” 滑 块 同 右 拖 息 ， 加 强 红 色 ， 表 将 “黄色 、 监 
色 ” 滑 块 向 左 拖 上 忠 ， 加 强 黄色 ，。 


条 


色 i 周 : 中间 坑 


步骤 02 设置 “阴影 ”选项 


上 一 步 操作 中 是 对 “中 间 调 ”部 分 的 颜色 进行 调整 ， 接 下 来 为 了 让 照片 的 色调 更 加 完美 ， 还 将 对 “阴影 ”色调 进行 调整 。 单 
击 “ 色 调 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 下 拉 列 表 中 选择 “阴影 ”选项 ， 选 择 后 将 “青色 、 红 色 ” 背 块 向 右 拖 岛 ， 加 强 红色 ， 青 
将 “黄色 、 蓝 色 ” 滑 块 向 左 拖 岛 ， 加 强 黄 色 。 


又 保留 明度 


步骤 03 用 “色彩 平衡 ”增强 色彩 


经 过 前 两 步 操 作 ， 图 像 颜 色 已 经 变 为 温暖 的 红 、 黄 色调 效果 了 。 为 了 增强 暖色 调 效 果 ,， 创建 “色彩 平衡 2” 调 整 图 层 ， 继 续 
使 用 同样 的 方法 调整 颜色 ， 加 深 红色 和 黄色 。 设 置 后 友 现 茶具 的 颜色 太 深 了 ， 单 击 “ 色 彩 平衡 2” 图 层 蒙 版 ， 用 黑色 画笔 在 茶具 
和 茶叶 位 置 涂抹 ,还 原 其 颜色 ，。 


色彩 平衡 2 
色彩 平衡 1 


按 住 Ctrl 键 不 放 ， 单 击 “ 色 彩 平衡 2” 图 层 蒙 版 ， 载 入 选区 。 新 建 “ 色 阶 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 拖 抱 滑 块 ， 
调整 图 像 的 腕 原 ， 使 男 面 的 颜色 显得 更 柔和 。 


实例 38 ” 目 由 更 改 照片 中 的 商品 总 色 


网 店 销售 的 商品 往往 有 多 种 不 同 的 颜色 供 顾客 选择 ， 很 多 时 候 为 了 节省 担 摄 成 本 ， 会 在 完成 其 中 一 种 颜色 的 商品 的 拍摄 后 ， 
通过 后 期 处 理 调 出 与 其 他 商品 颜色 相符 的 多 种 颜色 。 在 Photoshop 中 可 以 应 用 “可 选 颜 色 ” 功 能 自由 更 改 照片 中 的 商品 颜色 ， 
得 到 色彩 更 为 丰富 的 商品 效果 。 


率 材 随 书 资源 \ 秦 材 \05\05.jpg 


随 书 资源 \ 源 文件 \05\ 自 由 更 改 照 片 中 的 商 


源 文件 品 颜色 .psd 


步骤 01 创建 “选取 颜色 1” 调 整 图 层 


打开 素材 文件 0?.jpg， 为 了 让 顾客 看 到 不 同 颜色 的 衣服 的 整体 效果 ， 这 里 可 以 对 小 朋友 身上 的 服 委 颜 色 进行 调整 。 由 于 只 需 
要 调整 单个 颜色 ， 因 此 可 以 用 “可 选 颜色 ”进行 处 理 。 单 击 “ 调 整 ”面板 中 的 “可 选 颜色 ”按钮 图 ， 新 建 “ 选 取 颜色 1” 调整 图 


河 


可 选 颜色 
芝山 国 四 叉 
SA | Ls &y 555 


可 加 四 或 国 


从 打开 的 图 像 中 可 以 看 到 小 朋友 穿 痢 的 衣服 颜色 为 育 色 ， 所 以 单 击 “颜色 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 下 拉 列 表 中 选择 “ 


色 ” 选 项 ， 然 后 对 颜色 的 百分比 进行 设置 。 


+100 


+100 


+i00 


步骤 03 ”用 “画笔 工具 ”编辑 蒙 版 


器 


经 过 反复 调整 ， 最 终 确 定 将 衣服 颜色 设置 为 监 色 。 设 置 后 小 朋友 所 穿 厦 的 久 子 颜色 也 友 生 了 一 定 的 变化 ， 因 此 单 击 “ 选 取 颜 
色 1” 图 层 蒙 版 ， 选 择 “ 男 笔 工 具 ”， 把 前 景色 设置 为 黑色 ， 在 贸 子 位 置 单 击 并 涂抹 ， 经 过 多 次 涂抹 ， 还 原 收 子 颜 色 ，。 


反 巧 提示 : 指定 颜色 的 竟 合 万 式 


“可 选 颜色 ”下 可 以 应 用 方法 选项 设置 颜色 的 混合 方式 。 选 中 “相对 ” 单 选 按 钮 ， 可 按照 总 量 的 百分比 修改 现 有 的 青色 、 洋 
红 、 黄 色 或 黑色 的 食量。 例如， 如 果 从 50% 的 洋红 像素 开始 添加 10%， 则 5% 将 添加 到 洋红 ， 结 果 为 55% 的 洋红 
(50%*10%=5%) 。 选 中 “绝对 ” 单 选 按 钮 ， 则 采用 绝对 值 调整 颜色 。 例 如 ， 如 果 从 50% 的 洋红 像素 开始 添加 10%， 则 结果 为 
60% 的 洋红 。 


实例 39 ”修复 偏 惟 或 偏 暖 的 丙 品 照片 


在 室内 提 摄 商品 时 ， 很 容易 因为 光线 原因 造成 提 摄 出 来 的 商品 图 像 偏 冷 或 偏 暖 ， 此 时 可 以 利用 Photoshop 中 的 “照片 渡 
镜 ” 加 以 校正 。“ 照 片 渡 镜 ” 模 拟 相 机 镜头 上 安 涂 彩色 滤 镜 的 提 报 效果， 可 以 快速 消除 色 仿 或 对 照片 应 用 指定 的 色调 。 
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素 材 随 书 资源 \ 素 材 \05\06 .jpg 


随 书 资源 \ 源 文件 \05\ 修 复 偏 冷 或 偏 暖 
源 文件 的 商品 照片 psd 


ann 


步 又 01 创建 “ 照 厂 滤 镜 1” 调 整 图 层 

打开 素材 文件 06jpg， 可 以 看 到 因为 设置 了 错误 的 日 平衡 ， 导 致 扣 报 出 来 的 照片 整体 偏 冷 。 为 了 让 顾客 看 到 更 准确 的 包 包 颜 
色 ， 需 要 先 对 颜色 进行 校正 ， 这 里 用 互补 色 进 行 校 正 。 单 击 “ 调 整 ” 面 板 中 的 “照片 滤 镜 ”按钮 ， 新 建 “ 照 片 滤 镜 1” 调 整 图 
层 。 


步骤 02 ”选择 渡 镜 校正 颜色 


仔细 观察 不 难 友 现 原 图 像 整 体 偏 青 绿色 ， 打 开 “ 属 性 ”面板 ， 单 击 “ 滤 镜 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 下 拉 列 表 中 选择 青绿 
色 的 互补 色 “ 详 红 ”， 绸 设置 其 浓度 。 设 置 后 可 以 看 到 照片 的 颜色 得 到 了 还 原 。 


步骤 03 ”设置 “曲线 ” 提 亮 高 光 


为 了 突出 照片 中 间 的 手提 包 ， 可 以 对 照片 的 亮度 进行 调整 。 执 行 “ 选 择 > 色 彩 学 围 ” 命 令 , 打开 “色彩 范围” 对 话 框 ， 选 
择 “ 高 光 ” 选 项 ,确定 要 调整 的 范围 为 包 包 旁边 的 背景 部 分 ， 骨 创建 “曲线 1” 调 整 图 层 , 打开 “属性 ”面板 ， 在 面板 中 单 击 并 
向 上 拖 蝶 曲线 ， 提 亮 图 像 。 


选择 (C): 
检测 大 腔 tD) [|] 本 地 化 颜 色 艇 位) 


颜色 容 差 (F): % 


步骤 04 设置 “曲线 ” 提 亮 手提 包 


是 高 背景 亮度 后 ， 感 觉 手提 包 还 是 略微 偏 暗 ， 因 此 ， 按 住 Ctrl 键 不 放 ， 单 击 “ 曲 线 1” 图 层 蒙 版 , 载 入 选区 。 执 行 “ 选 择 > 反 
单 命令 ， 反 选手 提包 图 像 ; 再 创建 “曲线 2” 调 整 图 层 ， 单 击 并 向 上 拖 蝶 曲线 ， 提 亮 手 提包 。 


衬 


] 先 ” 


实例 40 ”突出 商品 图 像 的 局 部 增色 


对 于 某 些 商品 照片 来 说 ， 为 了 突出 商品 中 的 一 部 分 区 域 ， 会 对 该 区 域 的 图 像 进行 颜色 调整 ， 使 其 能 淋漓 尽 致 地 表现 出 商品 的 
寺 操 和 品质 。 在 Photoshop 中 可 以 使 用 “画笔 工具 ”对 照片 中 局 部 区 域 的 图 像 进 行 绘制 ， 并 结合 图 层 混 合 模式 蔷 加 头 色 ， 使 照 
片 中 的 商品 颜色 更 为 出 色 。 


素 材 随 书 资 源 \ 素 材 \05\07.jpg 


随 书 资源 \ 源 文件 \05\ 突 出 商品 图 像 的 


源 文 件 局 部 增色 .psd 


步骤 01 设置 前 景 头 色 


打开 素材 文件 07.jpg， 为 了 突出 照片 中 红色 的 珠子 ， 可 以 增强 其 颜 色 。 单 击 工 具 箱 中 的 “设置 前 景色 ”按钮 打开 “ 拾 色 器 
(前 景色 ) ”对 话 框 ， 在 对 话 框 中 对 要 增强 的 颜色 进行 设置 。 
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步骤 02 创建 新 图 层 更 改 混合 模式 


设置 颜色 后 单 击 “ 图 层 ”面板 中 的 “创建 新 图 层 ” 按 钮 ， 新 建 “ 图 层 1” 图 层 。 为 了 让 后 面 绘制 的 颜色 与 背景 中 的 珠子 颜色 


融合 ， 需 要 对 图 层 的 混合 模式 进行 调整 。 选择 “图 层 1” 图 层 ， 把 此 图 层 的 混合 模式 设置 为 “饱和 大 ”。 


请 Ee DT HU 
[他 入 度 | 走秀 明度 : 100% = 
HE : 2 条 四 填充 : 100% = 


zs ”不 委 明 度 : 100% = 
”中 心 填 褒 : 100% ~ 


步骤 03 ”调整 画笔 属性 


选择 “画笔 工具 ”， 单 击 “ 画 笔 ” 右 侧 的 下 搁 按钮 ， 展 开 “ 画 笔 预 设 ”选取 器 。 为 了 让 绘制 的 图 像 边 绿 更 加 和 柔和， 单 击 “ 
边 圆 ”画笔 笔触 ， 再 调整 男 笔 的 大 小 。 调 整 后 将 鼠标 移 全 链子 中 间 的 红色 珠子 位 置 ， 单 击 并 进行 涂抹 操作 。 


步骤 04 ”使 用 画笔 涂抹 图 像 


绘制 到 珠子 边缘 处 时 ， 为 了 让 绘制 的 效果 更 精确 ， 可 以 按 下 键盘 中 的 [ 键 , 缩小 画笔 笔触 再 进行 涂抹 ， 经 过 反复 涂抹 ,增强 
颜色 。 由 于 涂抹 后 的 珠子 颜色 显得 太 过 鲜艳 ， 所 以 把 图 层 的 不 透明 度 适当 降低 。 


不 透明 度 : 75% | 
DE : a 让 看 填充: 100% 


实例 41 让 商品 的 色彩 变 得 丰 明 


在 网 店 半 修 的 过 程 中 ， 对 商品 赢 色 进 行 适当 调整 可 以 让 商品 获得 更 遍 的 点 击 率 ， 提 高 商品 的 销量 。 本 例 所 用 的 照片 是 拍摄 的 
墨镜 商品 ， 为 了 让 照片 中 的 墨镜 更 加 漂 过 ， 利 用 “ 湖 变 工具 ” 力 其 填 宛 渐变 颜色 ， 并 通过 调整 图 层 的 混合 模式 ， 得 到 了 颜色 更 为 


丰富 的 镜 卢 效果 。 
Ee 材 随 书 资 源 \ 素 材 \05\08.jpg 
wi 的 色彩 变 
: 源 文件 得 丰富 .psd 


打开 素材 文件 08.jpg， 为 了 突出 墨镜 丰富 的 颜色 ， 可 以 对 它 填充 颜色 。 在 填充 颜色 前 选择 “钢笔 工具 ”， 在 镜片 位 置 绘制 路 
径 ， 绘 制 完成 后 按 下 快捷 键 Ctrl+ Enter， 将 绘制 的 路 径 转 换 为 选区 


步骤 01 选择 要 调整 颜色 的 区 域 


步骤 02 ”创建 新 图 层 更 改 混合 枢 式 


单 击 “ 图 层 ” 面板 底部 的 “创建 新 图 层 ”按钮 功 是 ， 新 建 “图 层 1” 图 层 。 新 建 图 层 后 ， 为 了 让 填充 的 颜色 晋 加 于 镜片 上 ， 
需要 对 混合 模式 进行 调整 ， 这 里 选择 “ 桑 光 ”混合 模式 。 


人 OTHUD OTH 
* 不 要 明度 : 100% et * ”不 和 明度 : 100% i™ 
“让 四 填充: 100% > WE: 团 sf 中 e 自 填充 : 100% ” 


步骤 03 ”设置 并 调整 渐变 颜色 


选择 “渐变 工具 ”， 蛙 击 选项 栏 中 的 渐变 条 ， 打 开 “ 淘 变 编辑 器 ”对 话 框 。 根 据 要 填充 的 新 变 颜 色 进 行 颜色 调整 ， 此 处 单 
击 “ 紫 ,， 检 新 变 ”， 表 单 击 并 向 右 拖 蝶 紫色 滑 块 ， 调 整 渐变 颜色 ， 设 置 后 单 击 “ 确 定 ” 按 钮 。 


色 标 
不 盐 曲 度 : "| % Ww 二: Yo 员 际 (DD， 


颜色 : 国 晴 蝴 》 位 置 (0: 42 | % | 遇 除 (D) 


步骤 04 ”在 选区 中 填充 渐变 颜色 


确保 “图 层 1” 图 层 为 选中 状态 。 从 模特 额头 位 置 向 腊 梁 下 万 单 击 并 拖 忠 潭 变 ， 为 墨镜 镜片 添加 渐变 的 颜色 效果 。 为 了 增强 
镜片 颜色 ， 按 下 快捷 键 Ctrl+J， 复 制图 层 ， 并 把 图 层 “ 不 透明 度 ” 设 置 为 30%。 


* ”不 透明 度 : 30% 
让 四 填充: 100% 
rey z 
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实例 42 ”商品 照片 中 的 无 彩色 应 用 


现在 很 多 网 店 为 了 吸引 更 多 的 顾客 ， 在 调整 商品 照片 的 过 程 中 ， 会 适当 对 商品 的 颜色 进行 艺术 化 处 理 ， 其 中 最 为 突出 的 就 是 
黑 日 色调 的 应 用 。 通 过 将 提 摄 的 照片 转换 为 黑 日 的 无 彩色 效果 ， 更 能 突显 商品 的 高 贵 、 精 怪 等 品质 。 本 实例 将 运用 “ 黑 日 ”功能 
快速 创建 黑 日 色调 的 商品 照 效 果 。 


束 材 随 书 资源 \ 素 材 \05\09.jpg 


pe 品 照 片 中 的 无 


步骤 01 创建 “ 黑 日 1” 调 整 图 层 


打开 素材 文件 09.jpg， 可 以 看 到 图 像 带 有 淡淡 的 黄色 ， 显 得 很 陈旧 ， 需 要 进行 调整 。 单 击 “ 调 整 ” 面 板 中 的 “黑白 ”按钮 下 
， 新 建 “ 黑 白 1” 调 整 图 层 。 


Wl 因 再 
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步骤 02 设置 黑 日 选项 


经 过 上 一 步 操 作 ， 图 像 被 转换 为 黑 日 效果 。 为 了 让 转换 后 的 黑 日 效果 更 加 出 色 ， 单 击 “ 属 性 ”面板 右上 和 角 的 “ 目 动 ”按钮 ， 


目 动 调整 颜色 值 。 


Tm: 
昌 

[名 : 
基色 : 
尘 色 : 
青色 : 


蓝 色 : 


“亮度 /对 比 度 ” 调 整 对比 


为 了 突出 手表 的 高 贵 品 


质 ， 可 以 对 照 厂 的 颜色 对 比 度 进行 调整 。 单 击 “ 调 整 ” 面 板 中 的 “亮度 /对 比 度 ” 按 钮 新建“ 亮度 / 
对 比 度 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 单 击 并 向 右 拖 忠 “对 比 度 ” 滑 块 ， 增 强 图 像 的 对 比 度 ， 得 到 更 有 层次 感 的 画面 。 
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将 拍摄 的 彩色 商品 照片 转换 为 黑白 效果 ,除了 使 用 “黑白 ”功能 外 ， 还 有 多 种 方法 可 以 实现 。 方 法 一 ， 执 行 “ 图 像 > 调 整 > 
自然 饱和 度 ” 菜 单 命令 ， 在 打开 的 对 话 框 中 将 “自然 饱和 度 ” 和 “饱和 度 ”设置 为 -100; 方法 二 ， 执 行 “ 图 像 > 调 整 > 色 相 /饱和 


度 ”菜单 命令 ， 在 打开 的 对 话 框 中 将 “饱和 度 ”设置 为 -100; 方法 三 ， 执 行 “ 图 像 > 模 式 > 灰 度 ”菜单 命令 ， 将 图 像 转换 为 灰 度 
模式 。 


在 担 摄 商品 照片 时 ， 很 有 可 能 会 因为 担 报 角度 和 相机 设置 等 原因 ， 导 致 提 摄 出 来 的 多 张 照片 中 商品 颜色 不 太一 致 ， 这 时 可 以 


通过 后 期 处 理 ， 应 用 Camera Raw 滤 镑 对 照 睛 进行 批量 调整 。 下面 将 通过 具体 的 实例 讲解 如 何 快速 批 处 理 照 上 请， 统一 商品 的 凑 
色 。 


素 材 随 书 资 源 \ 素 材 \05\10.cr2 一 14.cr2 


随 书 资 源 \ 源 文件 \05\ 让 一 组 照片 中 的 
源 文 件 商品 颜色 更 统一 .dng、 让 一 组 照片 中 
的 商品 颜色 更 统一 _1 一 4.dng 


步骤 01 打开 多 张 照 片 并 设置 “基本 ”选项 


局 动 Photoshop 程 序 ， 在 Camera Raw 窗 口中 打开 素材 文件 10.cr2 ~ 14.cr2， 友 现 图 像 层 次 感 侦 弱 ， 因 此 在 窗口 右 侧 的 “ 基 
本 ”选项 卡 中 调整 选项 ， 适 当 提 高 图 像 亮 度 。 
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步骤 02 设置 “色调 曲线 ”调整 颜色 


经 过 上 一 步调 整 ， 图 像 的 亮度 还 是 不 够 ， 再 单 击 “ 色 调 曲 线 ” 按 钮 互 ， 切 换 至 “色调 曲线 ”选项 卡 ， 在 选项 卡 中 单 
击 “ 点 ”标签 ， 然 后 日 击 并 向 上 拖 忠 曲线 ， 提 亮 图 像 ， 表 在 “通道 ”下 拉 列 表 框 中 选择 “ 蓝 色 ”选项 ， 单 击 并 向 上 拖 蝶 曲线 ， 提 
高 蓝 通 道 图 像 的 之 度 。 
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步骤 03 更改 局 部 颤 色色 相 


调整 亮度 后 ， 接 下 来 是 色彩 的 调整 。 单 击 “HSL/ 灰 度 ” 按 钮 听 ， 切 换 至 “HSL/ 灰 度 ” 选 项 卡 ， 在 选项 卡 中 先 单 击 “ 色 
相 ” 标 签 ， 展 开 对 应 的 选项 设置 。 这 里 为 增强 背景 与 人 物 主体 的 色彩 对 比 反 闫 效果 ， 向 右 拖 忠 “黄色 ”和 “绿色 ” 滑 块 ， 调 整 黄 
色 和 绿色 图 像 的 色相 。 


色相 “饱和 度 ， 明 亮度 


步骤 04 设置 “饱和 度 ” 让 颜色 更 鲜 掀 


单 击 “ 饱 和 度 ” 标 签 , 切换 至 “饱和 度 ” 选 项 卡 。 先 向 右 拖 忠 “红色 ” 滑 块 ， 再 适当 向 右 拖 护 “黄色 ”和 “绿色 ” 滑 块 ,使 
连 衣 馈 和 油菜 花 变 得 更 鲜艳 。 


色相 ,饱和 度 明亮 度 


_ 
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步骤 05 “设置 “明亮 度 ”以 调整 影 调 


观察 调整 后 的 图 像 ， 友 现 连 衣 馈 和 油菜 花 的 绿色 校 叶 偏 亮 ， 因 此 切换 至 “ 明 有 赏 度 ” 选 项 卡 ， 先 向 左 拖 忠 “红色 ”和 “ 绿 
色 ” 滑 块 ， 以 降低 这 两 个 颜色 的 亮度 ; 再 向 右 拖 岛 “黄色 ” 滑 块 ， 提 亮 黄 色 油 菜花 背景 ， 突 出 中 间 穿 着 连衣裙 的 模特 。 


色相 ， 旋 和 度 “” 明 毫 度 
默认 值 
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步骤 06 设置 “分 离 色调 ”来 变换 阴影 色调 


单 击 “ 分 离 色调 ”按钮 喜 ， 切 换 至 “分 离 色调 ”选项 卡 。 为 了 让 阴影 部 分 变 得 更 监 ， 将 “色相 ” 滑 块 拖 暇 到 监 色 位 置 ， 然 后 
同 右 拖 护 “饱和 度 ” 滑 块 ， 调 整 颜色 饱和 度 。 


昌国 刀 加 = A 


步骤 07 ”使 用 “渐变 滤 镜 ”添加 光 晕 效果 


最 后 ， 为 了 让 图 像 更 柔美 ， 可 以 为 其 添加 光 晕 效果 。 单 击 工 具 栏 中 的 “渐变 滤 镜 ”按钮 二 ， 展 开 “ 渐 变 滤 镜 ”选项 卡 ， 在 
其 中 调整 参数 并 选择 光量 颜色 ， 设 置 后 根据 画面 效果 从 图 像 右 上 角 向 中 间 位 置 抱 擅 鼠标 ， 释 放 鼠 标 后 即 可 看 到 设置 光景 后 的 图 
像 。 
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步骤 08 全 选 要 批量 调整 的 照片 


完成 单 张 照片 的 调整 后 ， 接 下 来 残 需要 进行 照片 的 批量 调整 。 单 击 窗口 左 侧 的 “全 选 ”按钮 ， 同 时 选中 打开 的 多 张 照 片 。 
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步骤 09 设置 “同步 ”选项 


单 击 窗口 左 侧 的 “同步 ”按钮 ， 将 会 打开 “同步 ”对 话 框 ， 在 其 中 可 以 设置 同步 选项 。 这 里 在 “ 子 集 ” 下 拉 列 表 框 中 选 


择 “ 全 部 ”选项 ， 然 后 单 击 “ 确 定 ” 按 钮 开始 照片 的 同步 处 理 操作 。 
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步骤 10 ”存储 调整 后 的 图 像 


照片 的 同步 处 理 操作 完成 后 ， 为 了 保留 处 理 结果 ， 还 需要 把 图 像 存 储 到 指定 位 置 。 单 击 “ 全 选 ” 按 钮 以 选中 所 有 要 存储 的 图 


像 ， 骨 单 击 窗口 左下 角 的 “存储 图 像 ” 按 钮 打开“ 存储 选项 ”对 话 框 ， 在 对 话 框 中 根据 需要 调整 存储 位 置 及 文件 名 称 ， 单 
击 “ 和 存储 ”按钮 ， 存 储 图 像 。 


-目标 : [在 新 这 置 存 全 = 


闭 择 京 件 南 . . E:“ 书 :新 书 源 交 件 “06\ 


-下 性 辣 
地 各 计 一 组 申 与 中 的 商 虽 颜色 车 魏 一 . rs 
让 一 组 照片 中 昌 商品 颜色 更 和 滨 一 


起 略 纺 号 : 


文件 扩 殿 和 名 : tme 


第 容 性 : | Fanara Raw 7.1 和 更 高 版 志 
JPES 牢 览 : | 中 等 太 小 


第 6 章 “” 文 字 与 图 形 的 应 用 


--- 活 动 时 间 : 9.10-9.18--- 
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Opporiu 


在 进行 网 店 委 修 时 ， 对 商品 照片 进行 处 理 是 必 不 可 少 的 环节 ， 那 么 完成 商品 照片 的 美化 和 修饰 后 ， 如 何 让 顾客 了 解 更 多 的 商 


品 信息 呢 ” 可 以 通过 在 图 像 中 添加 文字 和 图 形 的 万 法 来 实现 。 无 论 是 网 店 中 的 店 招 、 导 舰 还 是 活动 宣传 广告 ， 这 些 模块 的 设计 都 


包括 文字 与 图 形 的 设计 。 添 加 必要 的 文字 和 图 形 ， 能 将 画面 中 商品 的 特征 、 主 要 作用 、 功 效 等 信息 通过 图 片 清晰 地 表达 出 来 。 


44 在 照片 中 添加 横 排 文字 

45 ” 辣 商 品 图 像 添加 直 排 文字 

46 添加 段落 文字 摘 述 商品 信息 

47 ”添加 更 随 性 动感 的 文字 效果 

48 照片 中 的 个 性 化 文字 设计 

49 让 商品 照 请 中 的 文字 表现 出 立体 感 
50 在 商品 照片 中 绘制 规则 图 形 

51 在 商品 照片 中 绘制 不 规则 图 形 
52 ”添加 箭头 指示 商品 设计 亮 上 后 


53 ”为 商品 照片 添 加 个 性 水 印 


实例 44 ”在 照片 中 添加 横 排 文 字 


完成 照 厂 影 调 、 色 彩 的 调整 后 ， 为 了 使 表现 的 主题 更 加 明确 ， 需 要 在 照片 中 添加 文字 ， 其 中 最 为 普遍 的 文字 排 惠 万 式 束 是 水 
平 排列 。 在 Photoshop 中 使 用 “ 横 排 文字 工具 ”可 以 在 照片 中 快速 创建 沿 水 平 万 同 排 列 的 文字 ， 并 且 可 结合 “字符 ”面板 对 文 
字 的 字体 、 大 小 等 属性 进行 调整 。 


素 材 随 书 资源 \ 素 材 \06\01.jpg 


活动 时 间 ;， 9.10-918 
音 F DO cs AAA 


癌 发 布 会 
-一 179 轩 进 高 级 灶 法 


随 书 资源 \ 源 文件 \06\ 在 照片 中 添加 横 


a 
A 源 艾 件 。 排 文字 .psd 


步骤 01 用 “ 裁 勇 工具 ”裁剪 图 像 扩 展 男 布 


打开 泰 材 文件 01.jpg， 将 背景 色 设置 为 R245、G241、B232。 选 择 “ 裁 剖 工 具 ”， 沿 图 像 边缘 单 击 并 拖 岛 鼠标 ， 绘 制裁 前 
框 ， 然 后 调整 裁剪 框 的 大 小 ， 扩 展 画 布 效果 。 为 了 让 背景 与 右 侧 的 鞋子 图 像 过 渡 更 目 然 ， 选 择 “ 男 笔 工 具 ”， 将 前 景色 设置 为 
R245、G241、B232， 降 低 不 透明 度 ， 在 图 像 与 背景 边 绿 衔接 处 涂抹 。 


不 透明 度 : 45% 7 


步骤 02 使 用 “ 横 排 文字 工具 ”输入 文字 


选择 “ 横 排 文字 工具 ”， 在 画面 左 侧 的 留 日 处 单 击 并 输入 文字 “新 品 发 布 会 。 输 入 后 为 了 让 文字 更 加 醒 自 ,打开 “ 字 
”面板 ， 在 其 中 把 字体 设置 为 较 粗 的 方正 粗 傅 简体， 颜色 设置 为 RM139、G49、B13， 设 置 后 对 文字 应 用 其 效果 。 
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步骤 03 ”继续 输入 文字 
继续 在 文字 下 方 输入 “ 满 179 即 送 高 级 鞋 油 ”。 输 入 后 为 了 表现 文字 的 主 次 关系 ， 打 开 “字符 ” 面 


选择 “ 横 排 文字 工具 ”， 
板 ， 将 字体 设置 为 方正 超 粗 黑 简 体 ， 然 后 将 字号 调 小 至 88 点 ， 颜 色 设 置 为 较 鲜 艳 的 红色 。 


人 


万 正 起 粗 老 阐 .… 


和 满 179 即 送 高 级 鞋 油 
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步骤 04 ”输入 更 多 横 排 文字 


使 用 “ 横 排 文字 工具 ”在 画面 左 侧 单 击 并 输入 更 多 文字 。 输 入 后 利用 “字符 ”面板 调整 文字 的 大 小 、 字 体 和 颜色 ， 得 到 更 丰 
富 的 画面 效果 。 同 时 ， 在 “图 层 ” 面 板 中 将 得 到 对 应 的 文字 图 层 。 
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技 15 提 示 : 更 改 文字 排列 方 回 


用 “ 横 排 文字 工具 在 照片 中 输入 水 平 排列 的 文字 后 ， 单 击 选项 栏 中 的 “切换 文本 取向 ”按钮 ， 可 以 将 横 排 文字 转换 为 直 排 


实例 45 ” 辐 商 品 图 像 壬 加 下 排 驻 字 


在 商品 照 睛 中 ， 不 但 可 以 添加 沿 水 平方 向 排列 的 文字 ， 也 可 以 添加 沿 三 直方 向 排 询 的 文字 。 具 体操 作 方法 是 选择 工具 箱 中 
的 “ 直 排 文字 工具 ”， 然 后 在 需要 添加 文字 的 位 置 单 击 并 完成 文字 的 输入 操作 。 


素 材 随 书 资源 \ 素 材 \06\02.jpg 


随 书 资源 \ 源 文件 \06\ 向 商品 图 像 添加 


源 文件 让 排 文 字 psd 


步骤 01 使 用 “ 直 排 文字 工具 ”输入 文字 


打开 素材 文件 02.jpg， 单 击 工 具 箱 中 的 “ 直 排 文字 工具 ”按钮 ， 选 中 “ 直 排 文字 工具 ”。 将 鼠标 移 至 画面 左 侧 的 背景 位 置 ， 
单 击 鼠 标 ， 输 入 “古色 ”二 字 ， 然 后 打开 “字符 ”面板 ， 对 文字 属性 进行 更 改 。 由 于 饰品 为 古典 风格 ， 且 主要 颜色 为 红色 ， 为 了 
统一 画面 效果 ， 在 “字符 ”面板 中 把 字体 设置 为 叶 根 友 毛 笔 行书 ， 颜 色 设置 为 R198、G3、B3。 


字符 

叶 根 点 毛笔 行 .…… 
由 207.9 点 
中 


I 100% 


T 了 了 了 TIITTIT TIF 


为 了 让 文字 显得 更 加 漂亮 ， 可 以 更 改 单个 文字 的 颜色 。 使 用 “ 直 排 文字 工具 ”在 输入 的 文字 “ 色 ” 上 面 单 击 并 拖 蝶 姐 标 ， 选 
中 单个 文字 ， 打 开 “ 字 符 ” 面 板 ， 将 文字 颜色 设置 为 R238、G237、B190。 


步骤 03 ”复制 文字 图 层 


到 对 应 的 “古色 ”图 层 ， 按 下 快捷 键 Ctrl+J， 复 制 “古色 ” 图 层 ， 得 到 “古色 拷贝 ”图 层 。 将 复 
， 得 到 相同 样 


此 时 在 “图 层 ” 面 板 中 会 得 
制 的 文字 向 右 下 方 移动 ， 得 到 错落 的 文字 效果 ; 再 选择 “ 直 排 文字 工具 ”， 选 中 复制 的 文字 ， 将 其 更 改 为 “ 生 香 ” 
陈 的 文字 。 
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步骤 04 ”输入 更 多 文字 
为 了 不 让 文字 过 于 抢眼 ， 可 以 对 字体 进行 更 改 ， 


继续 在 石 侧 输 入 手链 名 、 所 属 品牌 、 产 地 等 信息 。 


选择 “ 直 排 文字 工具 ”， 
得 到 更 加 完整 的 画面 效果 。 


然后 将 文字 的 字号 设置 得 稍 小 一 些 ， 
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实例 46 ”添加 段 沿 文 字 搬 述 丙 品 信息 


如 果 一 张 照 片 中 需要 添加 大 量 的 文字 信息 ， 则 可 以 通过 创建 段 沙文 本 的 方式 来 实现 。 选 择 “ 横 排 文 字 工具 ”或 “ 直 排 文字 工 
具 ” 后 ， 在 要 添加 文字 处 单 击 并 拖 蝶 鼠标 ， 即 可 创建 一 个 段落 文本 框 ， 在 文本 框 中 输入 文字 即 可 完成 段 沙文 本 的 创建 。 


素 材 随 书 资源 \ 素 材 \06\03.jpg 


随 书 资源 \ 源 文件 \06\ 添 加 段落 文字 描 


源 文件 述 商品 信息 .psd 
步骤 01 用 “ 横 排 文字 工具 ”创建 段落 文本 
打开 素材 文件 03.jpg， 选 择 “ 横 排 文字 工具 ”按钮 ， 在 画面 左 侧 单 击 并 拖 遇 鼠标 ， 绘 制 一 个 文本 框 ， 然 后 在 文本 框 中 输入 文 


字 。 


| 一 键 可 启动 ， 完 成 京 坷 滴漏 后 ， 立刻 处 动 结束 工作 ， Ea 
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小 能 单 杯 式 夯 啡 机 
忧 势 1 可 调节 杯 架 "hm 
适合 不 同 杯 型 ， 无 论 是 马克 杯 还 是 随行 杯 ， 都 能 满足 你 所 

浆 尽 享 匡 味 。 | 
忧 势 2 方便 

一 勺 可 搞定 ， 冲 泡 一 杯 属 于 自己 的 研磨 咖啡 吧 | 
忧 势 3 自动 关机 


步骤 02 更 改 文 本 框 大 小 


输入 文字 信息 后 ， 为 了 让 文字 与 商品 区 分 开 来 ， 结 合 “ 


字符 ”面板 分 别 对 文本 框 中 文字 的 字体 、 颜 色 、 大 小 进行 调整 。 调 整 


后 发 现 文字 不 小 心 遮挡 了 下 方 的 咖啡 机 ， 所 以 选择 “ 横 排 文字 工具 ”， 在 文字 上 单 击 ， 显 示 文 本 框 ， 将 鼠标 移 人 至 文本 框 右 人 出 ， 当 


鼠标 变 为 双 同 箭头 时 ， 单 击 并 向 左 侧 抱 忠 ， 调 整 文本 框 大 小 。 


CAFFEE 
适合 不 同 口味 MAKER 
小 能 单 杯 式 咖啡 机 
优势 1 可 调 方 杯 染 


全 不 同 杯 型 ， 无 论 是 马克 杯 还 是 随行 杯 ,都 能 满足 你 的 
需求 ， 让 您 尽 享 美 转 。 


优势 2 方便 4 
一 勺 可 搞定 ， 冲 泡 一 杯 属于 自己 的 研磨 咖啡 中 


优势 3 自动 关机 


一 键 可 局 动 ， 完 成 京 者 滴漏 后 ， 立 刻 处 动 结 量 
全 可 靠 。 


步骤 03 ”更 改 文 本 对 齐 方式 


庆 合 不 同 口味 MAKER 
小 能 单 杯 式 咖啡 机 
优势 1 可 调节 杯 加 


合 不 同 杯 型 ， 无 论 是 马克 杯 还 是 随行 杯 ; 
才能 江 中 你 的 需求 让 您 尽 享 美味 。 ‘ 


扰 势 2 方便 中 吉 | 8 : 
一 勺 可 搞定 ， 冲 光一 杯 属于 自己 的 研磨 咖 冯 

中 e h 
优势 3 自动 关机 


一 键 可 启动 ， 完 成 京 者 滴漏 后 ， 立志 处 动 
结束 工作 ， 安全 可 靠 。 


由 于 默认 情况 下 ， 输 入 的 段落 会 以 左 对 齐 的 方式 显示 ， 为 了 计 文 字 显 得 更 加 崇 凑 ， 可 以 对 文字 的 对 齐 方式 进行 更 改 。 执 


行 “窗口 > 段落 ”有 菜 持 命 令 , 打开 “上 段落” 面板。 在 面板 中 单 击 “ 居 中 对 齐 文本 ”按钮 ， 将 文本 框 中 的 文字 对 齐 方 式 更 改 为 居中 


对 齐 O 


适合 不 同 口味 MAKER 
小 熊 单 杯 式 咖啡 机 
优势 1 可 调节 杯 架 
适合 不 同 杯 型 ,无 论 是 马克 杯 还 是 随行 杯 
, 都 能 满足 你 的 需求 ,让 您 尽 享 美味 。 


0 优势 2 方便 


一 勺 可 搞定 , 冲 泡 一 杯 属于 自己 的 研 麻 咖 
啡 吧 ! 
0 点 于 0 点 优势 3 自动 关机 


一 键 可 启动 ,完成 京 素 滴 漏 后 ,立刻 处 动 
如 尖 必 法则 俊生 : 无 \ 结束 工作 ,安全 可 靠 。 


Ial86 组 合 识 直 : ” 旧 距 组 合 1 


30 上 吓 


扩 15 提 示 : 设置 段 党 对 齐 的 要 所 
要 调整 段落 文字 的 对 齐 方式 时 ， 如 果 段 落 文字 处 于 正在 编辑 状态 ， 单 击 段 落 对 齐 按钮 ， 只 会 对 光标 所 在 段落 的 文字 进行 调 


整 ; 如 果 需 要 对 图 层 中 的 所 有 段落 设置 相同 的 对 齐 方式 ， 则 需要 单 击 工具 箱 中 的 任意 工具 ， 先 退出 文本 编辑 状态 ， 再 单 击 “ 段 


落 ， 面板 中 的 文本 对 齐 按 钮 ， 对 齐 段 落 文字 。 


实例 47 ”添加 更 随 性 动感 的 文字 效果 


为 了 让 画面 中 的 文字 表现 出 律动 感 ， 可 以 使 用 Photoshop 中 的 “变形 ”功能 对 输入 的 文字 进行 变形 。 在 变形 文字 时 ， 可 以 
根据 画面 的 整体 效果 ， 尝 试 不 同 的 变形 样式 ， 以 获得 最 佳 的 画面 效果 。 本 实例 将 讲解 如 何 制 作 动 感 的 文字 效果 。 
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泰 材 随 书 资源 \ 泰 材 \06\04.jpg 


随 书 资源 \ 源 文件 \06\ 添 加 更 随 性 动感 的 文 


源 文件 字 效 果 .psd 


步骤 01 使 用 “钢笔 工具 ”绘制 文字 搬 纹 


打开 素材 文件 04.jpg， 选 择 “ 钢 笔 工具 ”， 设 置 绘制 模式 为 “形状 ”， 然 后 在 图 像 右 下 方 连续 单 击 ， 绘 制 不 规则 图 形 ， 用 于 
确定 要 输入 的 文字 位 置 ; 再 选择 “形状 1” 图 层 ， 将 此 图 层 的 “不 透明 度 ” 设 置 为 70%， 降 低 不 透明 度 ， 让 图 形 与 背景 自然 融合 
到 一 起 。 


THD 


< | 不] 委 胃 度 : 70% 
和 re 100% 


选择 “ 横 排 文字 工具 ”， 打 开 “ 字 符 ” 面 板 ， 在 面板 中 对 文字 属性 进行 设置 ， 这 里 为 了 增强 文字 的 可 读 性 ， 将 文字 选择 为 较 
粗 的 汉 仪 双 续 体 简 体 ， 颜 色 设置 为 日 色 。 设 置 后 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 ， 对 文字 进行 适当 调整 。 
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确保 “ 横 排 文 字 工具 ”为 选中 状态 ， 单 击 选项 栏 中 的 “创建 文字 变形 ”按钮 图 ， 打开“ 变形 文字 ”对 话 框 。 为 了 表现 动感 的 


文字 效果 ， 单 击 “ 样 式 ” 下 拉 按 钮 ， 选 择 “ 旗 帜 ”样式 ， 再 将 “人 灾 曲 ” 值 调整 为 +43%， 设 置 后 单 击 “ 确 定 ”按钮 ， 应 用 文字 变 


形 效果 。 


样式 (5): | 岁 旗 由 ?| 
水 平 (H) ”Q 〇 各 直 (V) 
弯曲 (B): % 


水 平 扭曲 (0O): 


垂直 扭曲 (E): 


步骤 04 ”添加 更 多 动感 的 文字 


继续 使 用 “ 横 排 文字 工具 ”在 主 标题 文字 下 输入 更 多 文字 ， 输 入 后 单 击 选项 栏 中 的 “创建 文字 变形 ”按钮 国 ， 打 开 “ 变 形 文 
字 ” 对 话 框 。 为 了 表现 动感 的 文字 效果 ， 单 击 “ 样 式 ” 下 拉 按 钮 ， 选 择 “ 旗 帜 ”样式 ,再 将 “弯曲 ” 值 调 整 为 +20%， 统 一 画面 
中 的 文字 变形 效果 。 


水 平 (H)  () 事 直 (V) 


弯曲 (B): +20 | 呢 


实例 48 ”照片 中 的 个 性 化 文字 设计 


字体 决定 了 文字 输入 后 的 整体 效果 ， 进 行 网 店 妆 修 时 ， 为 了 让 画面 中 的 文字 更 吸引 人 ， 会 对 文字 做 己 术 化 设计 。 


Photoshop 中 使 用 “转换 为 形状 ”命令 可 以 将 输入 的 文字 转换 为 图 形 ， 结 合 路 径 编辑 工具 ， 就 能 完成 文字 的 艺术 化 变形 了 。 
| 了 NN 素 材 随 书 资源 \ 素 材 \06\05.jpg 
pe 嘱 源 文件 随 书 资源 \ 源 文件 \06\ 照 片 中 的 个 性 化 
S/S a 和 文字 设计 .psd 
ey / BAX se | /2 


打开 素材 文件 0?.jpg， 选 择 “ 模 排 文 字 工具 ”， 在 画面 中 输入 文字 “ 清 头 一 夏 狂 降 到 冰点 ”， 输 入 后 会 在“ 图 层 ” 面 板 中 得 
到 对 应 的 文字 图 层 。 
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单 击 “ 图 层 ” 面 板 中 的 “ 清 ” 图 层 ， 选 择 首 个 文字 “ 清 ”， 执行 “文字 > 转换 为 形状 ”菜单 命令 ,将 文字 转换 为 图 形 。 为 了 
看 到 转换 的 图 形 效 果 ， 选 择 “ 和 直接 选择 工具 ”， 单 击 “ 清 ” 字 ， 可 以 看 到 路 径 及 路 径 上 的 销 点 。 选 择 “ 转 换 上 操 工具 ”， 将 己 标 移 
至 路 径 上 需要 转换 的 销 点 位 置 ， 单 击 髓 标 ， 转 换 路 径 销 点 。 


步骤 03 ”变形 文字 并 设置 “ 摘 边 ”样式 


续 在 路 径 上 其 他 需要 转换 的 销 点 位 置 单 击 ， 转 换 路 径 销 点 ， 然 后 结合 其 他 路 径 编辑 工具 ， 对 文字 图 形 的 外 形 轮廓 进 
得 到 更 简单 的 艺术 化 字体 。 执 行 “ 图 层 > 图 层 样式 > 拉 边 ”菜单 命令 ,打开 “图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 设置 “ 摘 
”样式 选项 ， 为 文字 添加 摘 边 效果 。 


央 


步骤 04 ”完成 更 多 文字 的 艺术 化 设计 


使 用 与 步骤 02、03 相 同 的 万 法 ， 选 中 “图 层 ” 面 板 中 的 文字 图 层 ,执行 “文字 > 转换 为 形状 ”菜单 命令 ， 把 文字 转换 为 图 
形 ; 然后 更 改 文字 外 形 轮 慷 ， 并 为 其 添加 相同 的 摘 边 效果 ; 最 后 添加 辅助 文字 ， 完 成 文字 的 艺术 化 设计 。 
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实例 49 ”让 商品 照 睛 中 的 文字 表现 出 立体 感 


使 用 “ 棋 排 文字 工具 ”或 “下 排 文 字 工具 ”在 照片 中 输入 文字 后 ， 为 了 让 输入 的 文字 表现 出 立体 的 视 帝 效果 ， 可 以 使 用 “图 
层 样式 ”为 文字 添加 一 种 或 多 种 样式 效果 。 本 实例 将 介绍 如 何 快速 设计 立体 的 文字 效果 。 
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步骤 01 设置 “斜面 和 浮 肤 ”样式 


打开 素材 文件 06jpg， 使 用 “ 横 排 文字 工具 ”输入 文字 。 输 入 后 上 友 现 主体 文字 “全 新 升级 蔡 智 好 吸收 ”颜色 太 淡 ， 不 够 醒 
目 ， 因 此 双击 “全 新 升级 ”图 层 ， 打开“ 图 层 样 式 ” 对 话 框 。 在 对 话 框 中 多 选 “ 和 斜面 和 浮雕 ” 复 选 框 ， 设 置 “ 和 斜面 和 浮雕 ”样式 
选项 。 
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样式 ; | 济 避 果 | 


PA \ ly \ 方法 : | 下 时 | 
[ : I 深度 (D): 0 |358 |% 


A 和 9:@®@ 上 OF 


益 智 好 吸收 四- 


角度 (N): [127 | 雇 
DHA&ARA 一 有 利于 智能 发 育 | | 让 "全 用 全 局 (6) 
CPP~--- 有 利于 钙 、 铁 、 锌 的 吸收 高 度 : 一 
Oligo 活 性 益生 元 一 一 有 利于 肠 道 益生 菌 增殖 A EN 
2 光 圣 等 高 线 ; < | | 消除 锯 频 (L) 
高 % 模 式 :| 波 色 8 站 | 
不 明明 度 (0) a2 |% 
阴影 模式 : | 正片 要 底 :| 
不 过 明度 (C): 生 41 | 有 


步骤 02 ”设置 “ 摘 边 ”和 “投影 ”样式 


继续 在 “图 层 样式 ”对 话 框 中 进行 设置 ， 勾 选 “ 摘 边 ” 复 选 框 ， 设 置 “ 描 边 ” 选 项 ， 将 描 边 的 颜色 设置 为 与 商品 颜色 接近 的 
绿色 ， 统 一 画面 闫 色 。 再 勾 选 “投影 ” 复 选 框 ， 设 置 “投影 ”选项 ， 为 文字 设置 更 目 然 的 投影 效果 。 设 置 完 成 后 单 击 “ 确 定 ” 按 
钮 ， 应 用 样式 ， 得 到 更 加 立体 的 文字 效果 。 


De 


_ 指 边 
一 结构 \ 
大 小 (5: 了 一 一 es 混合 模式 : | 正片 县 底 :| 国 国 
位 置 : | 外 部 不 透明 度 (0): 一 |97 |% 
混合 模式 : | 正常。 AAA 一 
角度 (A): [ 、 度 “[ 使 用 全 局 光 


不 前 明 度 [0): 一 % ) 
填充 类 型 : | 颜色 *， 扩展 (R): Ce 0 | 
:oO 大 小 (，< 


步骤 03 ”复制 图 层 样 式 


为 了 让 画面 的 主体 文字 效果 更 加 统一 ， 右 击 “ 全 新 升级 ”图 层 下 方 的 图 层 样式 ， 在 弹出 的 快捷 荣 单 中 执行 “拷贝 图 层 样 
式 ” 命 令 ， 然 后 右 击 “ 葵 智 好 吸收 ”文字 图 层 ， 在 弹出 的 快捷 菜单 中 执行 “粘贴 图 层 样 式 ” 命 令 ， 粘 贴图 层 样 式 ， 得 到 相同 的 文 
字样 式 。 
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DHA&ARA 一 一 有 利于 智能 发 育 
DHA&ARA 一 一 有 利于 智能 发 育 : 
CPP 一 一 有 利于 钙 、 铁 、 锌 的 吸收 
Oligo 活 性 益生 元 -一 有 利于 肠 道 益生 菌 增殖 / 1 


步骤 04 设置 “ 摘 边 ”样式 


使 用 “ 横 排 文字 工具 ”在 画面 中 输入 日 色 的 文字 “和 葵 智 吸收 组 合 ”。 执 行 “ 图 层 > 图 层 样式 > 拉 边 ”菜单 命令 ， 打 开 “ 图 层 


DR 辐 


样式 ”对 话 框 ， 在 对 话 框 中 设置 摘 边 赢 色 为 绿色 ， 将 曰 色 的 文字 突显 出 来 。 
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从 加 吸收 组 合 请 类 型 
处 DHA&ARA 一 -有 利于 智能 发 育 
， 村 CPP-- 有 利于 钙 、 铁 、 锌 的 吸收 | 经 : 国 国 
和 oligo 活性 益生 元 -一 有 利于 肠 道 益生 茵 坞 对 -也 


实例 50 ”在 商品 照 睛 中 绘制 规则 图 形 


在 网 店 六 修 中 ， 为 了 突出 画面 中 的 部 分 内 容 ， 会 在 指定 区 域 绘制 规则 的 圆 形 或 矩形 等 图 形 。 在 Photoshop 中 ， 如 果 要 绘制 
规则 的 图 形 ， 可 以 使 用 “ 算 形 工具 ”和 “椭圆 工具 ”。 在 具体 的 操作 过 程 中 ， 只 需要 单 击 并 拖 岛 昭 标 丈 能 快速 完成 图 形 的 绘制 。 


款 材 随 书 资源 \ 泰 材 \06\07 .jpg 


随 书 资源 \ 源 文件 \06\ 在 商品 照片 中 绘制 
源 文件 规则 图 形 .psd 


步骤 01 使 用 “ 裁 副 工具 ”更 改 画 面 构图 


打开 素材 文件 07jpg， 由 于 这 张 照 片 要 表现 的 商品 是 模特 脖子 上 的 围巾 ， 所 以 选择 “裁剪 工具 


”， 在 图 像 上 方 单 击 并 拖 忠 刀 
标 ， 绘 制 一 个 裁剪 框 。 勾 选 “删除 裁剪 的 像素 ” 复 选 框 , 按 下 Enter 键 ,裁剪 图 像 ， 突 出 商 品 。 
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步骤 02 使 用 “椭圆 工具 ”绘制 图 形 


将 前 景色 设置 为 与 背景 头 色 反攻 较 大 的 颜色 ,选择 “椭圆 工具 ”， 按 住 Shift 键 不 放 ， 在 图 像 左 上 角 位 置 单 击 并 拖 蝶 鼠标 ， 
绘制 正 圆 图 形 。 绘 制 后 ， 为 了 让 图 形 表现 出 立体 的 视 完 效果 ， 双 击 图 层 ， 打开“ 图 层 样式 ”对 话 框 , 勾 选 “投影 ” 复 选 框 ， 设 
置 “ 投 影 ” 样 式 选项 ， 添 加 投影 。 


混合 模式 : | 正片 到底 加 | 

不 乔 明 度 (0): 二 |i0 |% 
角度 (A}: 八 。 ] [150 | 庚 。[ 使 用 全 局 光 (6) 
扩展 (R): |o0 |% 
大 小 ( 引 : 本 国 国 上 : 


步骤 03 ”复制 图 层 调整 选项 


按 下 快捷 键 Ctrl+J， 复 制 一 个 圆 形 ， 按 下 快捷 键 Ctrl+T， 显 示 目 由 变换 编辑 框 ， 按 住 Shift+Ctrl 键 不 放 ， 单 击 并 拖 暇 鼠标， 
稍微 放大 图 像 。 放 大 后 因 图 形 的 颜色 、 描 边 效 果 都 一 样 ， 所 以 遮 关 了 下 方 的 圆 形 。 为 了 将 两 个 图 形 区 分 开 来 ， 用 “直接 选择 工 
具 ” 选 中 较 大 的 正 圆 图 形 ， 在 选项 栏 中 调整 图 形 的 填 苑 、 摘 边 选项 ， 得 到 圆 点 朱 边 效果 。 


和 i 面 面 面 面 面 面 面 面 


步骤 04 ”添加 起 形 和 文字 


使 用 “ 棋 排 文字 工具 ”在 图 形 中 间 和 下 方 输入 文字 。 输 入 文字 后 ， 为 了 突出 文字 “SHOW"” ， 选 择 “ 直 形 工具 ” 


景色 为 R105、G215、B186， 在 文字 下 方 单 击 并 拖 虹 鼠标， 绘制 矩形 。 
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实例 51 在 商品 照 厂 中 绘制 不 规则 图 形 


在 网 店 妆 修 的 过 程 中 ， 除 了 需要 绘制 规则 的 息 形 、 万 形 和 圆 形 修饰 图 像 或 版 面 外 ， 为 了 让 画面 更 有 特色 ， 还 经 单 需 要 在 图 像 
中 绘制 不 规则 的 图 形 。 本 实例 将 使 用 “ 圆 角 矩形 工具 ”和 “多边形 工具 ”绘制 商品 对 比 展示 效果 ， 突 出 商品 的 优质 。 


素 材 随 书 资源 \ 素 材 \06\08.jpg 


随 书 资源 \ 源 文件 \06\ 在 商品 照片 中 绘 
源 文件 制 不 规则 图 形 .psd 


步 又 01 使 用 “ 圆 角 矩形 工具 ”绘制 边框 


打开 素材 文件 08.jpg， 首 先 为 图 像 绘制 边框 。 选 择 “ 圆 角 和 矩形 工具 ”， 在 选项 栏 中 将 “半径 ”设置 为 0 像素 ， 沿 图 像 边 缘 单 
击 并 拖 忠 女 标 ， 绘 制 同等 大 小 的 直角 和 矩形 ; 再 单 击 “ 路 径 操 作 ” 按钮 ， 在 弹出 的 下 拉 人 列表 中 单 击 “排列 重 埃 形状 ”选项 ， 设 
置 “半径 ”为 15 像 素 ， 在 画面 中 间 位 置 绘制 圆 角 炬 形 效果 。 


对 ”半径 : 15 像素 


“日 新 建 图 层 

央 合并 形状 

加] 减 去 顶层 形状 
各 与 形状 区 域 柜 交 


步骤 02 ”绘制 不 同 颤 色 的 圆 角 起 形 


继续 使 用 同样 的 万 法 ， 在 画面 中 间 位 置 单 击 并 拖 忠 昭 标 ， 绘 制 一 个 日 色 的 圆 角 算 形 ， 划 分 图 像 。 将 前 景色 设置 为 R210、 
G57、B59， “半径 ”设置 为 30 像 素 ， 在 左 半 部 分 图 像 硕 部 绘制 一 个 玖 红色 的 圆 角 和 矩形。 选择 “ 横 排 文字 工具 ”， 在 红色 的 图 形 


上 单 击 ， 输 入 文字 “和 柔软 厚实 ”。 


步骤 03 ”在 画面 中 添加 更 多 圆 角 和 窍 形 和 文字 


继续 使 用 同样 的 万 法 ， 在 画面 中 绘制 更 多 圆 角 和 矩形 效果 。 绘 制 完成 后 选择 “ 横 排 文字 工具 ”， 在 绘制 的 图 形 上 输入 对 应 的 文 
字 ， 突 出 毛衣 的 材质 特点 。 


黑 周 守 畦 秦 黑 ， 惰 覆 午 前， 高 笠 翌 硬 ， 丽 上 且 也 上 庶 腾 
， 可 衣 导 败 度 且 址 脐 雷 同 是 ， 两 且 林 开 得 车 闻 间 副 一 觅 
制 鼻 的 对 过 
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步骤 04 使 用 “多 边 形 工具 ”绘制 星 形 


为 了 表现 衣服 的 材质 品级 ， 可 以 继续 在 图 像 中 绘制 星 形 图 案 。 单 击 工 具 箱 中 的 “多 边 形 工具 ”按钮 ， 单 击 选项 栏 中 的 “几何 
体 选 项 ”按钮 ， 展 开 “ 几 何 体 选 项 ”下 拉 人 列表 。 由 于 这 里 要 绘制 平滑 的 星 形 图 案 ， 所 以 勾 选 “平滑 拐角 ”和 “ 星 形 ” 复 选 框 ， 然 
后 在 选项 栏 中 把 “ 边 ” 设 置 为 2， 在 图 像 上 单 击 并 拖 折 鼠标 ， 绘 制 星 形 效果 。 
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缩 进 边 依据 : 53% 采用 高 品质 羊毛 ， 和 柔软 ， 无 异味 ， 不 扎 身 ， 
平 骨 缩 进 


| 画 三 
上 画 
采用 高 品质 羊毛 ， 和 柔软 ， 无 异味 ， 不 扎 身 ， 不 退色 


， 保 星 性 好 等 特 ， 昌 然 价格 稍微 高 了 点 ， 但 是 质量 绝对 
保证 ， 我 们 以 诚意 为 本 ， 让 消费 者 购买 到 放心 的 产品 。 
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实例 ?2 湛 加 前 头 指示 商品 设计 之 尽 


在 制作 商品 卖点 展示 图 时 ， 为 了 让 商品 的 主要 功效 、 特 点 表现 得 更 加 明确 ， 往 往 会 在 图 像 中 添加 一 些 线条 或 季 头 图 案 。 在 
Photoshop 中 ， 使 用 “直线 工具 ” 即 可 快速 在 照片 中 完成 线条 或 箭头 图 形 的 添加 ， 同 时 还 能 根据 画面 需要 ， 灵 活 更 改 这 些 线 
或 箭头 的 粗细 、 颜 色 等 。 


棉 质 鞋 带 哟 元 内 里 


精 选 头 层 和 牛皮 


= 


优质 防滑 大 底 高 式 车 线 后 跟 提 拉 辅助 设计 


订 材 随 书 资源 \ 素 材 \06\09.jpg 


随 书 资源 \ 源 文件 \06\ 添 加 箭头 指示 商品 
设计 品 扣 .psd 


源 文 件 


步骤 01 绘制 起 点 市 箭头 的 线条 


打开 素材 文件 09jpg， 单 击 工具 箱 中 的 “设置 前 景色 ” 按钮， 打开 “ 拾 色 器 (前 景色 ) ”对 话 框 。 由 于 照片 中 的 鞋子 颜色 为 
蓝 色 ， 所 以 将 要 绘制 的 图 形 的 颜色 设置 为 R29、G47、B69， 单 击 “ 确 定 ” 按钮 。 选 择 “ 直 线 工具 ”， 单 击 “ 几 何 体 选 项 按 
钮 ， 展 开 “ 几 何 体 选项 ”下 拉 列 表 ， 由 于 此 实例 需要 绘制 的 图 形 为 带 箭头 的 直线 ， 所 以 色 选 “起 点 ” 复 选 框 ， 调 整 线条 粗细 ， 单 
击 并 向 上 拖 电 鼠标 ， 绘 制图 形 。 
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步 又 02 “绘制 终点 带 季 头 的 线条 


继续 使 用 同样 的 万 法， 在 鞋子 上 方 绘制 更 多 不 同 长 得 的 市 季 头 的 直线 。 接 下 来 还 需要 在 画面 下 方 绘制 市 箭头 的 直线 ， 
击 “ 几 何 体 选项 ”按钮 ， 在 展开 的 下 拉 列 表 中 多 选 “ 终 点 ” 复 选 框 ， 单 击 并 向 上 拖 蝶 鼠标 ， 继 续 绘制 图 形 。 


窗 度 : 500% 


长 度 : 1000% 


步骤 03 ”绘制 更 多 线条 


根据 要 表现 的 鞋子 的 卖 足 ， 继 续 使 用 “和 直线 工具 ”在 画面 中 绘制 出 更 多 不 同 长 短 的 直线 。 按 下 快捷 键 Ctrl+J， 复 制 “ 背 
景 ” 图 层 ， 创 建 “ 育 景 拷贝 ”图 层 。 使 用 “椭圆 选 框 工具 ”绘制 圆 形 选区 ， 单 击 “ 添 加 图 层 蒙 版 ”按钮 ， 添 加 蒙 版 ， 隐 藏 多 余 的 


图 像 ， 显 示 鞋 子 的 细节 效果 。 


. 
| 有 有 景 持 风 


步骤 04 ”设置 更 丰富 的 画面 
为 了 让 要 表现 的 商品 卖点 更 明确 ， 选 择 “ 模 排 文字 工具 ”， 在 图 像 上 方 单 击 ， 输 入 文字 “ 精 选 头 层 牛皮 ”。 继 续 使 用 同样 的 
方法 ， 复 制图 像 ， 添 加 文字 。 
帆 廊 圣 谊 跑 习 内 里 
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优质 防滑 大 旗 总 式 车 线 后 跟 提 垃 铺 助 设计 
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实例 53 ”为 商品 照 户 过 加 个 性 水 印 


现在 很 多 店家 为 了 树立 店铺 的 品牌 形象 ， 或 者 防止 其 他 店铺 次 用 图 片 ， 都 会 在 商品 图 片上 添加 个 性 化 的 水 印 。Photoshop 
中 可 以 结合 “ 目 定 形状 工具 ”和 文字 工具 创建 水 印 图 案 ， 并 将 其 定义 为 预 设 的 图 和 案 ， 方 便 在 其 他 照片 中 添加 相同 的 水 印 效果 。 


素 材 随 书 资 源 \ 素 材 \06\10.jpg 


随 书 资 源 \ 源 文件 \06\ 为 商品 照片 添加 
源 文件 个 性 水 印 .psd 


步骤 01 新 建文 件 绘制 图 形 
在 添加 水 印 表 需 要 先 绘制 水 外 图形， 执行 “文件 > 新 建 ”菜单 命令 ， 打开“ 新建 ”对 话 框 。 在 对 话 框 中 输入 新 建文 件 名 、 寓 


度 和 大 小 等 选项 ， 单 击 “ 确 定 ”按钮 ， 新 建文 件 。 选 择 “ 钢 笔 工 具 ”， 在 画面 中 间 位 置 绘 制 一 个 糖果 形状 的 图 形 。 


文档 类 型 : | 自 定 =| 


忘 路， 


宽度 (W): | 500 | | 集束 


高 度 (H): | 500 | | 像素 * 
分 辨 牵 (R): |72 | | 熏 素 /英寸 :| 
颜色 模式 : | RGB 颜色 :| | 8 位 3| 


首 景 内 容 : | 白色 :| 


步骤 02 继续 绘制 图 形 
单 击 选项 栏 中 的 “路 径 操 作 ” 按钮 ， 在 展开 的 下 拉 列 表 中 单 击 “排除 重 赦 形状 ”选项 ， 继 续 在 糖果 图 像 中 辣 位 置 绘制 一 个 心 
形 ， 得 到 复古 形状 效果 。 


四 与 形状 区 域 相交 
”排除 语 营 形状 


入 合并 形状 组 件 


步骤 03 ” 目 定 义 图 形 


将 绘制 的 图 形 定 义 为 新 的 水 印 图 案 , 执行 “编辑 > 定义 目 定 形状 ”菜单 命令 ,打开 “形状 名 称 ”对 话 框 。 在 对 话 框 中 输入 形 
状 名 “店铺 LOGO” ， 单 击 “ 确 定 ” 按 钮 ， 目 定义 形状 。 此 时 如 果 要 得 看 定义 的 形状 ， 则 可 单 击 “ 目 定形 状 工具 ”按钮 ， 则 可 单 
击 “ 形 状 ” 石 侧 的 下 拉 按 钮 ， 在 展开 的 面板 下 方 融会 看 到 定义 的 图 形 。 
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步骤 04 使 用 “ 目 定 形状 工具 ” 绘制 图 形 


在 Photoshop 窗 口中 打开 素材 文件 10jpg， 选 择 “ 目 定形 状 工具 ”， 单 击 “ 形 状 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 面板 中 单 击 
目 定 义 的 “店铺 LOGO” 形 状 ， 在 图 像 中 蛙 击 并 拖 蝶 鼠标 ， 绘 制图 形 。 


选择 “ 横 排 文字 工具 ”， 在 绘制 的 图 形 右 侧 单 击 并 输入 文字 “实物 扣 摄 次 图 必 究 糖果 果 的 小 屋 ”。 输 入 后 打开 “字符 ” 面 
板 ， 对 输入 文字 的 属性 进行 设置 ， 将 字体 设置 为 较 活 泌 的 万 正 粗 依 简 体 ， 颜 色 设 置 为 清爽 的 日 色 ，。 
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输入 文字 后 ， 友 现 文 字 与 绘制 的 店铺 LOGO 图 形 重 合 了 。 执 行 “ 窗 口 > 段 藻 ”菜单 命令 ,打开 “上 段 藻 ”面板 ， 单 击 “ 右 对 齐 
文本 ”按钮 ， 将 段 洛 文字 更 改 为 石 对 齐 效果 。 


絮 尖 民法 则 有 直 :无 
BlgB 组 合 T 直 :无 


为 了 让 设置 的 水 印 图 案 与 下 方 的 商品 融合 ， 需 要 为 文字 创建 特殊 的 艺术 效果 。 按 住 Ctrl 键 不 放 ， 单 击 “ 形 状 1” 和 文字 图 
层 ， 按 下 快捷 键 Ctrl+Alt+E， 兰 印 选中 图 层 ， 得 到 “实物 担 摄 资 图 必 究 糖果 果 的 小 屋 (合并 ) ”图 层 。 单 击 图 层 前 的 “指示 图 
层 可 见 性 ”图 标 ， 将 下 方 的 “形状 1” 和 文字 图 层 隐 藏 起 来 。 
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直入 明度 : 100% 


填充 : 100% 


T ”实物 拍摄 咨 图 必 究 糖 .… 
呈 羡 形 伏 1 


确保 “实物 担 摄 资 图 必 究 糖果 果 的 小 屋 (合并 ) ”图 层 为 选中 状态 ， 执 行 “ 滤 笠 > 风 格 化 > 浮雕 效果 ”菜单 命令 ， 打 开 “ 浮 
雕 效果 ”对 话 框 。 此 处 不 需要 对 参数 作 更 改 ， 直 接 单 击 “ 确 定 ” 按 钮 ， 对 图 案 应 用 浮雕 效果 。 


| 取消 | 
[Yi 预览 (P) 


二 100%  @ 


月 度 j: [135 ] 度 【、) 
高 度 (H): 像素 


数量 (M): |100 | % 


反 巧 提示 : 滤 镜 的 重复 应 用 


图 层 中 的 对 象 应 用 滤 镜 后 ， 如 果 需 要 再 应 用 相同 的 滤 镜 效果 ， 则 可 以 按 下 快捷 键 CttlI+E， 如 果 需 要 打开 上 一 次 设置 的 滤 镜 对 
话 框 ， 则 可 以 按 下 快捷 键 Ctrl+Alt+F。 


步骤 09 ”更改 图 层 混合 模式 


选中 “实物 拍摄 咨 图 必 究 糖果 果 的 小 屋 (合并) ”图 层 ， 将 此 图 层 的 混合 模式 更 改 为 “ 强 光 ”。 设 置 后 可 看 到 水 印 图 案 显示 
为 半 透 明 效果 。 


1UU 

团 of 让 国 填充: 100% 
[mw | | \ 

° 实物 拍摄 盗 图 必 究 糖 .. 


实例 54” 抠 取 外 形 较 规则 的 丙 品 


如 果 打 开 照 片 后 友 现 要 抠 取 的 商品 为 较为 规则 的 圆 形 、 万 形 ， 则 要 快速 抠 出 商品 图 像 ， 最 好 的 万 法 束 是 使 用 “和 矩形 选 框 工 
具 ” 或 “椭圆 选 框 工具 ”来 完成 。“ 和 矩形 选 框 工具 ”和 “ 李 圆 选 框 工具 ”可 以 创建 较 规则 的 矩形 或 圆 形 选区 。 下 面 介绍 外 形 规则 
的 商品 的 抠 取 过 程 。 


素 材 随 书 资源 \ 素 材 \07\01.jpg 


随 书 资源 \ 源 文件 \07\ 抠 取 外 形 较 规则 


源 文件 的 商品 .psd 


步骤 01 选择 “ 窍 形 选 框 工具 ”绘制 目 形 选区 


打开 素材 文件 01jpg， 可 以 看 到 照 卢 中 咖啡 机 包 妆 盒 为 规则 的 起 形 ， 因 此 可 以 选择 “起 形 选 框 工具 ”来 抠 取 。 单 击 “ 起 形 选 
框 工具 ”按钮 国 ， 将 妃 标 移 至 包装 盒 左 上 角 位 置 ， 单 击 并 向 右 下 角 拖 钨 鼠标 ， 当 拖 岛 至 一 定位 置 后 释放 局 标 ， 选 择 图 像 。 


多 w2ar 小 能 


是 酬 主 病 


步骤 02 ”复制 选区 内 的 图 像 


选择 图 像 后 ， 按 下 快捷 键 Ctrl+J， 就 可 以 将 选区 内 的 图 像 复 制 。 单 击 “ 背 景 ” 图 层 前 的 “指示 图 层 可 见 性 ”按钮 图 ， 即 可 
查看 抠 出 的 商品 效果 。 


BA 小 能 
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步骤 03 ”创建 新 图 层 填 元 颜色 


为 了 使 抠 出 的 图 像 育 景 更 干将 ， 可 以 为 它 添加 新 的 纯色 背景 。 在 “图 层 1” 图 层 下 方 新 建 “图 层 2” 图 层 ， 设 置 前 景色 为 
R245、G241、B232， 按 下 快捷 键 Alt+ Delete， 运 用 设置 的 前 景色 为 背景 填充 颜色 。 


OT in 


* 不 荔 明 度 : 100% 


Fz 


步骤 04 ”复制 图 层 添 加 投影 


抠 出 图 像 后 ， 还 需要 让 扑 出 的 图 像 表 现 出 立体 的 视 部 感 。 复 制 “ 图 层 1” 图 层 ， 得 到 “图 层 1 拷贝 ”图 层 ， 牌 直 翻 转 图 层 中 
的 图 像 ， 并 为 其 添加 图 层 蒙 版 ,选择 “渐变 工具 ”， 从 下 方 往 上 拖 岛 黑 日 靳 变 ， 得 到 渐 隐 的 投影 效果 。 


买 例 ?5 ” 抠 取 不 规则 多 边 形 对 象 


大 多 数 情 况 下 所 接触 的 商品 形状 并 不 是 非常 规则 的 和 矩形、 万 形 或 圆 形 ， 这 时 应 用 选 框 工具 束 不 能 完整 地 抠 出 需要 的 商品 对 
象 。 在 Photoshop 中 ， 如 果 需 要 抠 出 多 边 形 对 销 ， 需 要 使 用 “多 边 形 套 过 工具 ”来 实现 。 本 实例 介绍 了 使 用 “多 边 形 僚 索 工 
具 ” 抠 取 商 品 的 具体 方法 。 


素 材 随 书 资源 \ 素 材 \07\02、03.jpg 


随 书 资源 \ 源 文件 \07\ 抠 取 不 规则 多 边 


形 对 象 .psd 
步骤 01 使 用 “多 边 形 套 过 工具 ”创建 选区 
打开 素材 文件 02.jpg， 可 以 看 到 原 照片 中 的 商品 外 形 轮 廓 为 不 规则 的 多 边 形 ， 因 此 可 以 选用 “多 边 形 套 索 工 具 ” 进 行 图 像 的 


抠 取 操作 。 选 择 “ 多 边 形 套 这 工具 ”， 将 鼠标 移 全 化 妆 品 图 像 边缘 ， 通 过 连续 单 击 ， 选 择 左 侧 的 化 妆 品 图 像 。 


步骤 02 扩展 选区 效果 
在 处 理 这 张 照 片 时 ， 不 但 要 抠 出 元 侧 市 包 妆 的 商品 ， 还 需要 抠 出 右 侧 不 市 包 交 的 商品 。 单 击 “ 多 边 形 套 率 工具 ”选项 栏 中 
的 “添加 到 选区 ”按钮 目 ， 然 后 将 鼠标 移 到 右 侧 的 化 妆 品 图 像 上 ， 连 续 单 击 鼠 标 ， 进 行 图 像 的 选择 操作 。 
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步骤 03 ”复制 并 抠 取 图 像 


11 习 (=== 
月 只 


经 过 上 一 步 操作 ， 选 中 了 画面 中 的 所 有 商品 图 像 ， 按 下 快捷 键 Ctrl+Jj， 即 可 复制 选区 内 的 图 像 ， 抠 出 商品 。 单 击 


层 前 的 “指示 图 层 可 见 性 ”按钮 一， 查看 抠 取 的 图 像 。 隐 藏 “背景 ” 图 层 后 ， 发 现 图 像 因 拍摄 原因 有 点 倾斜 ， 按 下 快捷 键 


Ctrl+T， 打 开 上 自由 变换 编辑 框 ， 单 击 并 拖 蝶 编辑 框 ， 调 整 图 像 的 透视 角度 。 


ee 


步骤 04 ”修复 偏 瞳 的 图 像 


抠 出 图 像 后 ， 为 了 让 抠 出 的 商品 更 出 色 ， 可 以 为 其 添加 新 的 育 景 图 像 。 打 开 素 材 文 件 03jpg， 将 打开 的 化 水 图 像 复 制 到 化 妆 
品 图 像 中 。 根 据 画 面 的 整体 效果 ,创建 “ 色 阶 1” 和 “ 目 然 饱和 度 1” 调 整 图 层 ， 调整 商品 的 明暗 和 色彩 。 


实例 56 ”从 蛙 一 背景 中 快速 抠 取 轮廓 清晰 的 商品 


当 商 品 照片 的 背景 颜色 变化 不 大 ， 需 要 选取 的 主体 对 象 轮 慷 清晰 ， 且 与 背景 色 之 间 有 一 定 的 磊 异 时 ,使 用 “ 魔 棒 工具 ”可 以 


快速 选择 并 抠 出 对 象 。“ 魔 棒 工 具 ” 的 使 用 方法 非常 简单 ， 只 需要 在 图 像 上 单 击 ，Photoshop 束 会 选择 与 蛙 击 处 色调 相似 的 像 


素 材 随 书 资源 \ 素 材 \07\04.jpg 


随 书 资源 \ 源 文件 \07\ 从 单一 背景 中 快 


源 文件 速 抠 取 轮廓 清晰 的 商品 .psd 


步骤 01 使 用 “ 魔 棒 工 具 ” 单 击 表 景 


打开 素材 文件 04.jpg， 友 现 画 面 中 间 的 鞋子 与 背景 颜色 反差 较 大 ， 可 以 使 用 “ 魔 棒 工 具 ” 来 抠 取 鞋子 图 像 。 选 择 “ 魔 棒 工 
具 ”， 将 鼠标 移 至 灰色 的 背景 处 单 击 。 


步骤 02 ”连续 单 击 扩 展 选择 学 围 


单 击 后 发 现 选 中 了 整个 背景 图 像 ， 为 了 实现 更 精细 的 选取 ， 单 击 选项 栏 中 的 “添加 到 选区 ”按钮 图 ， 将 鼠标 移 至 鞋子 下 方 
多 影 处 ， 单 击 昭 标 ， 添 加 选区 ， 扩 大 选择 范围 。 


阁 - 国 里 由 虽 取样 大 小 : 


继续 使 用 “ 魔 棒 工 具 ” 在 鞋子 旁边 的 背景 处 单 击 ,扩展 选区 ， 直 全 选中 整个 背景 区 域 。 由 于 这 张 照片 需要 抠 出 的 图 像 为 画面 
中 间 的 男 鞋 ， 因 此 按 下 快捷 键 Shift+ Ctrl+1， 反 选 选区 ， 即 选中 了 画面 中 间 的 鞋子 部 分 。 


步骤 04 复制 并 抠 出 图 像 


按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 图 像 ， 得 到 “图 层 1” 图 层 。 隐 藏 “背景 ”图 层 ， 检 查 抠 出 的 鞋子 图 像 ， 友 现 鞋 子 边 绿 还 
有 一 些 黑色 的 背景 。 选 择 “ 橡 皮 擦 工具 ”， 在 边缘 处 涂抹 ， 将 黑色 背景 擦 除 干净 。 最 后 可 以 为 抠 出 的 图 像 添 加 新 的 背景 和 投影 效 
宋 。 


反 巧 提示 : “ 麻 棒 工具 ”使 用 技巧 


于 “ 魔 棒 工具 ”来 说 ， 多 尝试 是 获得 满意 选区 的 最 佳 方法 。 如 果 选 择 的 范围 过 大 ， 则 可 适当 减 小 “ 容 差 ” 值 ; 如 果 选 择 的 范 
围 过 小 ， 则 可 以 增加 “ 容 差 ” 值 。 


实例 ?7 从 复杂 育 景 中 拟 取 轮廓 清晰 的 商品 图 像 


当 商 品 照片 的 背景 颜色 较为 复杂 ， 需 要 选取 的 主体 对 象 轮 慷 清晰 时 ， 可 以 使 用 “快速 选择 工具 ”快速 选择 并 抠 出 图 像 。“ 快 
速 选择 工具 ”能 够 利用 可 调整 的 画笔 笔尖 像 绘画 一 样 涂抹 出 选区 ， 涂 抹 时 选区 会 目 动 扩展 并 查找 与 跟随 图 像 中 定义 的 边缘 。 


素 材 随 书 资源 \ 素 材 \07\05.jpg 


随 书 资源 \ 源 文件 \07\ 从 复杂 背景 中 抠 


源 文件 取 轮 廓 清晰 的 商品 图 像 .psd 


步骤 01 使 用 “快速 选择 工具 ”创建 选区 


打开 素材 文件 05.jpg， 这 张 照 片 在 担 报 时 选择 了 一 些 物品 搭配 担 报 ， 但 是 担 摄 出 来 的 画面 显得 有 些 凌乱 ， 为 了 更 好 地 展示 鞋 
子 ， 在 后 期 处 理 时 可 以 将 鞋子 抠 出 。 由 于 这 张 照 片 背 景 相 对 较 复 杂 ， 因 此 为 了 让 抠 出 的 鞋子 更 完整 ， 选 择 “ 快 速 选择 工具 ”,， 将 
女 标 移 公 鞋子 图 像 上 ， 单 击 并 拖 蝶 鼠标 ， 选 择 图 像 。 


步骤 02 ”连续 音 击 扩展 选区 


单 击 “ 快 速 选择 工具 ”选项 栏 中 的 “添加 到 选区 ”按钮 图 ， 继 续 在 画面 中 的 鞋子 位 置 单 击 并 涂抹 ， 扩 大 选择 范围 ， 选 择 更 多 
的 鞋子 区 域 。 


PrF 有 图 后 取样 


步骤 03 ”继续 调整 选区 效果 


经 过 上 一 步 操作 ， 发 现 不 但 选中 了 鞋子 ， 还 把 一 些 多 余 的 背景 也 添加 到 了 选区 。 因 此 单 击 “从 选区 减 去 ”按钮 图 ， 在 鞋子 旁 
边 不 需要 选择 的 背景 位 置 单 击 ， 减 少 选择 学 围 ， 直 到 选择 完整 的 女 鞋 部 分 。 
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步 又 04” 抠 出 图 像 调 整 阴影 亮度 


按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 图 像 ， 得 到 “图 层 1” 图 层 ,， 隐藏 “背景 ”图 层 ， 查 看 抠 出 的 图 像 ， 友 现 因为 是 侧 逆 光 提 
报 ， 鞋 子 右 侧 偏 瞳 。 执 行 “ 图 像 > 调 整 > 阴影 /高 光 ” 菜 单 命 令 ， 在 打开 的 对 话 框 中 设置 选项 ， 调 整 鞋子 的 亮度 ， 最 后 填充 纯 日 色 


的 育 景 。 


中 显示 珊 凶 迁 廿 [6) 


呵 祯 查 [p] 


实例 ?8 ” 抠 取 边 绿 复 洲 且 与 背景 肥 帮 较 大 的 商品 


当 要 选择 的 图 像 边 缘 复 杂 且 与 背景 对 比较 强 时 ， 要 想 轻 松 地 选择 并 抠 出 图 像 ， 可 以 使 用 “磁性 套 厅 工 具 ”。 “磁性 套 这 工 
具 ” 能 够 目 动 检 测 和 跟踪 商品 对 象 的 边 绿 ， 用 尸 只 需要 沿 商品 对 象 单 击 并 拖 蝶 鼠标 ， 束 可 轻松 完成 图 像 的 选择 操作 。 


泰 材 随 书 资源 \ 素 材 \07\06.jpg 


源 文 件 随 书 资源 \ 源 文件 \07\ 抠 取 边 绿 复杂 且 与 背景 反差 较 大 的 商品 .psd 


步骤 01 使 用 “磁性 套 索 工具 ”绘制 选区 


打开 素材 文件 06.jpg， 选 择 工具 箱 中 的 “磁性 套 索 工具 ”， 然 后 在 选项 栏 中 将 “宽度 ” “对 比 度 ” 和 “频率 ”都 设置 为 较 小 
的 值 ， 以 便 更 准确 地 选择 图 像 。 将 鼠标 移 人 至 手提 包 边 缘 位 置 ， 单 击 并 拖 邱 喜 标 ， 选 择 手 提包 的 外 形 轮 万 。 


项 率 : 100 


步骤 02 ”从 选区 中 减 去 多 余 图 像 


经 过 上 一 步 操作 ， 友 现 不 但 选择 了 手提 包 ， 还 将 手提 市 内 部 的 背景 也 选中 了 ， 所 以 需要 对 选区 进行 调整 。 单 击 “ 从 选区 减 
去 ”按钮 图 ， 将 鼠标 移 至 手提 带 内 部 的 边缘 处 ， 单 击 并 拖 电 鼠 标 ， 减 小 选择 范围 。 


到- 国史 | [5 3 0 像素 YY :法 祭 乌 贞 


步骤 03 ”添加 选区 效果 


接着 是 下 方 摆 放 的 手提 带 的 选择 。 单 击 “ 添 加 到 选区 ”按钮 图 ， 将 鼠标 移 至 包 包 下 方 的 带子 位 置 ， 单 击 并 拖 折 鼠标 ， 添 加 选 
选择 更 为 完整 的 手提 包 图 像 。 


步骤 04 复制 并 抠 出 图 像 


按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 包 包 图 像 。 为 了 让 抠 出 的 图 像 更 有 视 党 冲击 力 ， 创 建新 图 层 ， 为 包 包 图 像 填充 新 的 新 变色 
背景 ， 最 后 使 用 “ 横 排 文字 工具 ”在 包 包 图 像 下方 添加 简单 的 文字 说 明 人 信息。 


实例 59 ”根据 色彩 和 影 调 差异 拟 取 商品 图 像 


如 果 需 要 选择 的 商品 的 色彩 较 明 确 ， 且 与 背景 色彩 反差 较 明 显 ， 则 可 以 使 用 “色彩 沁 围 ”命令 选择 并 抠 取 图 像 。 


围 ”命令 主要 根据 图 像 的 颜色 和 影 调 范 围 创建 选区 ， 应 用 它 可 非常 轻松 地 选择 某 些 特定 的 颜色 ，。 


谁 是 你 的 下 一 任 


宠爱 ] 


经 典 复 古 元 素 


素 材 随 书 资源 \ 素 材 \07\07.jpg 


随 书 资源 \ 源 文件 \07\ 根 据 色 彩 和 
源 文件 差异 抠 取 商品 图 像 .psd 


步骤 01 执行 “色彩 范围 ”菜单 命令 


打开 素材 文件 07,jpg， 为 了 更 好 地 表现 包 包 的 细节 ， 这 张 照 片 担 摄 时 采用 了 顶 拍 的 方式 ， 由 于 只 需要 表现 包 包 ， 所 以 后 期 处 


背景 上 


理 时 需要 将 它 抠 取 出 来 。 执 行 “ 选 择 > 色 彩 范 围 ” 菜 单 命令 ,打开 “色彩 学 围 ” 对 话 框 ， 在 对 话 框 中 用 “ 吸 省 工具 ”人 在 背景 上 单 


击 ， 选 择 部 分 背景 。 


选择 (C): | 取样 颜色 = 
补 刑 信 腔 ([D】 站 本 地 化 颜色 艇 人 z) 
| 取消 
颜色 音 差 (F) 39 | | 取消 | 
: | 朝 凡 作 ) | | 
| 存储 (5)..，| | 
章光 
| 区 相 (1) 


名 选择 范围 IE) ”中 ) 图 像 (M) 


殉 区 预览: | 无 :| 


步骤 02 调整 吸 样 颜色 区 域 


了 与 旦 


由 于 这 里 需要 选择 整个 背景 部 分 ， 所 以 单 击 “色彩 沁 围 ”对 话 框 中 的 “添加 到 取样 ”按钮 ， 继 续 在 包 包 旁边 的 育 景 位 置 连 续 
单 击 ， 确 定 整个 背景 显示 为 日 色 后 ， 单 击 “ 确 定 ” 按 钮 ， 创 建 选区 ， 选 择 图 像 。 执 行 “ 选 择 > 反 选 ” 合 令 ， 反 选 选区 ， 选 中 手提 


包 图 像 。 


选择 iD: | 职 样 颜色 | 


以 更 人 腾 [中 [ 本 地 此 曾 色 谤 [z) 
颜色 容 差 [FF: 39 | 


| 载 入 Q)..。 | 


| 存储 (5)..。 | 


=# 国 2# 


| 友 相 (DD) 


4 
坟 


ia 选择 范围 [E) (图像 (M) 


选区 预览 :| 无 让 


步骤 03 ”编辑 并 调整 选区 范围 


创建 选区 后 ， 按 下 快捷 键 Ctrl+ +， 放 大 图 像 ， 友 现 部 分 手提 包 未 被 添加 人 至 选区 中 。 因 此 选择 “快速 选择 工具 ”， 单 击 选项 
栏 中 的 “添加 到 选区 ”按钮 图 ， 在 包 包 图 像 上 单 击 ， 扩 大 选择 范围 ; 再 单 击 “ 从 选区 减 去 ”按钮 图 ， 在 画面 左下 角 的 背景 选区 
处 早 击 ， 减 少 选 择 沁 围 ， 选 择 更 完整 的 包 包 图 像 。 
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步 又 04 ” 抠 取 图 像 调 整 影 调 


按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 图 像 ， 得 到 “图 层 1” 图 层 ， 使 用 “橡皮 擦 工具 ” 擦 除 包 包 边 缘 多 余 的 背景 ,执行 “图 层 
> 复制 图 层 ” 菜 单 命令 ,复制 图 层 。 由 于 原 图 像 偏 瞳 ， 因 此 更 改 图 层 混合 模式 ， 提 亮 图 像 ， 最 后 为 包 包 ; 湛 加 新 的 背景 和 文字 。 
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实例 60 ”通过 通 示 对 比 扑 取 半 透明 的 商品 对 象 


在 进行 商品 图 像 的 抠 取 时 ， 如 果 需 要 拟 出 半 透 明 的 商品 ， 如 化 妆 品 、 水 晶 、 辈 驾 摆 件 、 婚 纱 等 ， 则 可 以 使 用 通 章 来 抠 出 图 
像 。 通 道 抠 图 主要 是 通过 不 同 通 道中 的 颜色 明暗 差异 来 选择 图 像 ， 本 实例 介绍 如 何在 通道 中 抠 取 半 透 明 的 商品 对 象 。 
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雪 材 随 书 资源 \ 素 材 \07\08.jpg 


源 文 件 随 书 资源 \ 源 文件 \07\ 通 过 通道 对 比 抠 取 半 透 明 的 商品 对 象 .psd 


步骤 01 使 用 “钢笔 工具 ”绘制 路 径 


打开 素材 文件 08.jpg， 这 里 需要 将 画面 中 的 化 妆 品 抠 出 。 选 择 “钢笔 工具 ”， 沿 商品 边缘 轮 大 绘制 路 径 ， 按 下 快捷 键 
Ctrl+Enter， 将 绘制 的 路 径 转换 为 选区 ， 选 中 商品 图 像 。 
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步骤 02 ”复制 选区 内 的 图 像 


选择 图 像 后 按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 图 像 ， 得 到 “图 层 1” 图 层 ， 此 图 层 中 的 图 像 即 为 抠 出 的 商品 。 单 击 “ 背 
景 ”图 层 前 的 “指示 图 层 可 见 性 ”按钮 国 ， 隐 藏 “ 背 景 图 层 ， 查 看 抠 出 的 商品 效果 。 
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步骤 03 ”创建 新 图 层 填 元 纯色 育 景 


经 过 前 两 步 的 操作 ， 虽 然 抠 出 了 商品 的 整体 轮廓 ， 但 是 并 没有 呈现 出 半 透 明 的 玻璃 质感 。 因 此 复制 “图 层 1” 图 层 ， 单 


击 “ 图 层 ”面板 中 的 “创建 新 图 层 ” 按 钮 和 EE， 新 建 “ 图 层 2” 图 层 ， 设 置 前 景色 为 黑色 ， 按 下 快捷 键 Alt+ Delete， 将 图 层 填 充 
为 黑色 ， 可 以 看 到 抠 出 的 商品 变 得 更 加 清晰 。 
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切换 至 “通道 ”面板 ， 单 击 各 通道 ， 查 看 通道 中 的 图 像 ， 友 现 “ 监 ”通道 中 的 图 像 对 比较 强 ， 因 此 将 该 通道 拖 忠 至 “创建 新 
通道 ”按钮 勿 有 ， 复 制 通道 ， 得 到 “ 蓝 拷 贝 ”通道 。 


四 


确保 “ 蓝 拷贝 ”通道 为 选中 状态 ,执行 “图 像 > 调 整 > 亮度 /对 比 度 ” 菜 单 命令 ,打开 “亮度 /对 比 度 ”对 话 框 。 为 了 抠 出 半 
透明 的 瓶子 ,将 “亮度 ” 滑 块 向 右 拖 忠 ， 以 提 亮 图 像 ， 再 将 “对 比 度 ” 背 块 向 右 拖 忠 ， 以 增强 对 比 。 


对 比 度 : 


使 用 旧版 (LD) 


单 击 “通道 ”面板 中 的 “将 通道 作为 选区 载 入 ”按钮 国 ,， 将“ 蓝 拷贝 ”通道 中 的 图 像 作为 选区 载 入 ， 这 时 可 以 看 到 通道 中 
日 色 和 灰色 区 域 被 添加 至 选区 中 。 
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要 将 通道 中 的 图 像 载 入 到 选区 ， 还 可 以 按 住 Cttl 键 不 放 ， 单 击 通 道 缩 览 图 。 


执行 “选择 > 反选 ” 菜 蛙 命令 ， 反 选 选区 。 蛙 击 “ 通 道 ”面板 中 的 RGB 通 道 ， 返 回 “ 图 层 ” 面 板 ， 便 看 创建 的 选区 效果 。 
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创建 选区 后 ， 接 下 来 瓯 是 半 透 明 质感 的 表现 。 选 中 “图 层 1 拷贝 ”图 层 ， 单 击 “ 图 层 ” 面 板 撒 部 的 “添加 图 层 蒙 版 ”按钮 ， 
添加 家 版 。 绸 早 击 “图 层 1” 图 层 前 的 “指示 图 层 可 见 性 ”按钮 ， 隐 藏 “图 层 1” 图 层 ， 这 时 可 以 看 到 呈现 半 透 明 的 琢 璃 钼 效 
来 。 


PR go Tun 
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在“ 图 层 2” 图 层 上 方 新 建 “ 图 层 3” 图 层 ， 设 置 前 景色 为 日 色 ， 按 下 快捷 键 Alt+ Delete， 将 背景 重新 填 宛 为 干净 的 日 色 。 
再 选择 “图 层 1” 图 层 ， 单 击 “ 图 层 ” 面 板 中 的 “添加 图 层 蒙 版 ”按钮 EI， 添加 蒙 版 ， 使 用 黑色 画笔 在 需要 设置 为 透明 区 域 的 
瓶 届 及 育 景 处 涂抹 。 
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步骤 10 ”调整 商品 的 亮度 


经 过 前 面 的 操作 ， 已 经 抠 出 了 商品 ， 但 是 因为 拍摄 时 光线 较 暗 ， 瓶 子 也 偏 暗 ， 给 人 脏 脏 的 感觉 ， 所 以 创建 “ 色 阶 1” 调 整 图 
层 ， 提 亮 图 像 。 最 后 将 瓶子 及 调整 图 层 盖 印 ， 制 作出 倒影 ， 并 添加 纯 白色 的 背景 效果 。 
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实例 61 ”所 取 边 绿 沧 肯 的 商品 图 像 


前 面 介 绍 了 单一 背景 、 规 则 对 象 、 轮 万 清晰 的 对 象 的 选取 ， 但 是 这 些 抠 取 图 像 的 方法 都 只 能 在 画 质 要 求 不 高 的 情况 下 使 用 。 
在 网 店 六 修 中 ， 如 果 对 画 质 要 求 较 高 ， 则 可 以 使 用 “钢笔 工具 ” 抠 取 图 像 。 “钢笔 工具 ”是 最 为 准确 的 抠 图 工具 ， 它 具有 良好 的 
可 控 性 ， 能 够 按照 绘制 的 沁 围 创建 平滑 的 路 径 ， 边 界 清楚 、 明 确 ， 适 合 边缘 光滑 的 图 像 的 选取 。 
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束 材 随 书 资源 \ 素 材 \07\09.jpg 
源 文件 随 书 资源 \ 源 文件 \07\ 抠 取 边 缘 光 滑 的 商品 图 像 .psd 


打开 素材 文件 09.Jjpg， 发 现 照 片 中 的 玩具 虽然 外 形 很 复杂 ， 但 其 边缘 相对 较 光滑 ， 因 此 选择 “钢笔 工具 ”来 抠 出 商品 图 像 。 
将 鼠标 移 至 玩具 图 像 边 缘 位 置 ， 单 击 鼠 标 ， 添 加 一 个 路 径 锚 上 后 ， 然 后 将 昭 标 移 人 至 玩具 边缘 男 一 位 置 ， 蛙 击 并 皂 蝶 妇 标 ,创建 曲线 
路 径 。 


步骤 02 ”调整 路 径 操 作 方 式 绘制 路 径 


继续 使 用 与 步骤 01 相 同 的 方法 ， 沿 儿 重 玩具 边缘 轮廓 绘制 路 径 。 绘 制 后 单 击 “ 路 径 操 作 ” 按钮 ， 在 展开 的 下 拉 列 表 中 单 
击 “ 排 除 重 鲁 形 状 ”选项 ， 在 玩具 提 手 内 部 单 击 并 拖 岛 鼠标 ， 绘 制 路 径 ， 创 建 复合 路 径 。 


] 减 去 顶层 形状 
同 与 形状 区 域 柜 交 


步骤 03 ”将 路 径 转换 为 选区 抠 出 图 像 


切换 至 “路 径 ” 面 板 ， 可 看 到 绘制 的 路 径 缩 览 图 效果 。 单 击 “ 将 路 径 作 为 选区 载 入 ”按钮 国 ， 载 入 选区 ， 选 择 玩 具 图 像 ， 
按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 图 像 ， 得 到 “图 层 1” 图 层 。 隐 藏 “ 背 景 ”图 层 ， 查 看 抠 出 的 玩具 。 


步骤 04 设置 “曲线 ”增强 对 比 


在“ 背景 ”图 层 上 新 建 “ 图 层 2” 图 层 ， 将 背景 填充 为 日 色 ， 并 扩展 画布 大 小 。 观 察 图 像 友 现 玩 具 亮 度 不 够 ,色彩 也 不 够 出 


彩 ， 因 此 创建 “曲线 1” 调 整 图 层 ， 单 击 并 向 上 拖 外 曲 线 ， 提 亮 图 像 ， 最 后 为 图 像 添加 文字 ，。 
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实例 62 保留 更 多 细 书 的 两 品 抠 取 


在 网 店 妆 修 中 ， 如 果 需 要 选择 边缘 复杂 的 图 像 ， 为 了 保留 更 多 的 商品 细节 部 分 ， 可 以 在 快速 蒙 版 模式 下 拟 取 图 像 。 快 速 蒙 版 


可 以 将 任意 选区 转换 为 蒙 版 ， 也 可 以 将 蒙 版 转换 为 选区 。 它 主要 是 通过 画笔 涂抹 的 轨迹 来 选择 图 像 ， 由 于 画笔 绘制 具有 更 高 的 目 
由 性 ， 所 以 使 用 快速 蒙 版 可 以 抠 出 更 精细 的 商品 图 像 。 
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泰 材 随 书 资源 \ 素 材 \07\10.jpg 


源 文件 随 书 资源 \ 源 文件 \07\ 保 留 更 多 细节 的 商品 抠 取 .psd 


步骤 01 ”在 快速 莹 版 状态 下 涂抹 图 像 


打开 素材 文件 10.jpg， 为 了 保留 更 完整 的 婚纱 细节 ， 选 择 快速 蒙 版 抠 图 。 单 击 工具 箱 中 的 “以 快速 蒙 版 模式 编辑 ”按钮 ， 进 
入 快速 蒙 版 编辑 状态 ， 选 择 “ 男 笔 工 具 ”， 在 “画笔 预 设 ”选取 器 中 单 击 “ 硬 边 圆 ”画笔 ， 将 鼠标 移 全 馈 子 位 置 ， 单 击 并 涂抹 图 
像 。 
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步骤 02 退出 快速 蒙 版 创建 选区 


按 下 键盘 中 的 [或 ] 键 ,调整 画笔 笔触 大 小 ， 继 续 在 照片 中 的 裙子 上 面 涂抹 ， 将 整个 主体 图 像 涂抹 为 半 透 明 的 红色 。 涂 抹 完 成 
后 单 击 “ 以 标准 模式 编辑 ”按钮 ， 退 出 快速 蒙 版 编辑 状态 ， 创 建 选区 。 
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步骤 03 ”复制 选区 内 的 图 像 


由 于 上 一 步 创建 的 选区 选择 的 是 整个 背景 区 域 ， 所 以 需要 执行 “选择 > 反选 ”菜单 命令 ， 反 选 选区 ， 选 中 画面 中 间 的 主体 商 


品 。 为 了 让 后 面 抠 出 的 图 像 边 绿 更 加 和 干净， 执行 “选择 > 修改 > 收缩 ”菜单 售 令 ， 打 开 “ 收 缩 选区 ”对 话 框 。 输 入 “收缩 量 ” 为 
1,， 单 击 “ 确 定 ”按钮 ， 收 缩 选 区 。 按 下 快捷 键 Ctrl+J， 复 制 选区 ， 抠 取 选 区 中 的 馈 子 对 象 。 


收缩 重 (C): 像素 


门 应 用 画布 边界 的 效果 | 取消 | 


步骤 04 ”设置 “色相 /饱和 度 ” 修 复 偏 色 


抠 出 图 像 后 ， 友 现 受 环境 因素 影响 ， 日 色 的 袜子 出 现 了 偏 红 的 情况 。 创 建 “ 色 相 / 饱 和 度 1” 调 整 图 层 ,打开 “属性 ”面板 ， 
设置 选项 ， 校 正 颜 色 ， 并 为 图 像 添 加 渐变 的 背景 和 文字 效果 。 
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实例 63 ”为 商品 图 像 蔡 换 背景 


网 店 委 修 中 ， 相 同 的 商品 在 不 同 的 背景 烘托 下 可 以 呈现 出 不 同 的 视 部 效果， 一 个 好 的 育 景 图 像 可 以 提升 商品 品质 ， 增 强 画 面 
的 美感 。 所 以 在 处 理 图 像 时 ， 可 以 根据 要 表现 的 商品 的 特点 ， 使 用 图 层 蒙 版 快速 为 商品 图 像 著 换 育 景 。 


素 材 随 书 资源 \ 素 材 \07\11、12.jpg 


随 书 资源 \ 源 文件 \07\ 为 商品 图 像 蔡 换 


背景 .psd 


源 文 件 


步骤 01 复制 图 层 添 加 图 层 蒙 版 


打开 素材 文件 11.jpg， 复 制 “ 背 景 ” 图 层 , 创建 “背景 拷贝 ”图 层 。 为 “背景 拷贝 ”图 层 湛 加 图 层 蒙 扳 ,打开 “属性 ” 面 
板 ， 显示 “ 蒙 版 ”选项 ， 单 击 右 下 方 的 “颜色 汽 围 ”按钮 。 
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步骤 02 在 “色彩 范围 ”对 话 框 中 调整 图 像 


打开 “色彩 学 围 ” 对 话 框 ， 在 对 话 框 中 用 “吸管 工具 ”在 背景 位 置 单 击 ,设置 选择 范围 。 为 了 让 抠 出 的 图 像 更 干净 ,， 单 
击 “ 添 加 到 取样 ”按钮 神 ， 继 续 在 黑色 和 灰色 的 背景 位 置 单 击 ， 调 整 选择 学 围 。 由 于 这 里 只 需要 显示 指甲 油 瓶 部分， 而 图 像 预 抑 
区 中 的 黑色 区 域 是 要 隐藏 的 区 域 ， 所 以 义 选 “ 反 相 ” 复 选 框 ， 使 主体 商品 显示 为 日 色 。 


选择 ( 吕 ; | 站 取样 癌 色 


_ | 本 地 化 颜色 族人 ) 


A 
9) 选择 范围 (E) ” 〇 图 像 (M) 


| 


9) 选择 范围 (E) ”() 图 像 (M) 


步骤 03 ”根据 颜色 隐藏 图 像 


设置 完成 后 单 击 “ 确 定 ”按钮 ， 返 回 图 像 窗口 。 隐 藏 “ 育 景 ” 图 层 ， 可 看 到 整个 背景 图 像 都 通过 蒙 皮 隐藏 了 起 来 。 按 住 Alt 
键 不 放 ， 单 击 “ 背 景 拷贝 ”图 层 蒙 版 ， 显 示 蒙 版 ， 选 用 日 色 男 笔 在 指甲 油 皂 身 位 置 涂抹 ， 将 它 涂抹 为 日 色 ， 显 示 更 为 完整 的 指甲 
油 措 对 象 。 


| | -off gel lack 


Mt: 15m DSor 


Soak-off gel la 


| 


步骤 04 ”复制 图 像 添 加 图 层 蒙 版 


打开 素材 文件 12.jpg， 将 打开 的 图 像 复 制 到 指甲 油 瓶 图 像 下 方 。 选 择 “ 渐 变 工具 ”， 在 “渐变 ” 拾 色 器 中 单 击 “ 黑 ， 日 渐 
变 ”， 为 “图 层 1” 图 层 添加 蒙 版 ， 从 右 侧 向 左 侧 拖 忠 黑 日 渐变 。 


是 较 人 国 图 峡 模 芭 : 


步骤 05 复制 图 层 更 改 不 透明 度 


按 下 快捷 键 Ctrl+J， 复 制 “ 图 层 1” 图 层 ， 得 到 “图 层 1 拷 贝 ”图 层 。 执 行 “ 编 辑 > 变换 > 水 平 翻转 ”菜单 命令 ， 翻 转 图 像 并 
将 其 移 至 画面 的 另 一 人 出。 调整 “图 层 1 拷 贝 ” 图 层 的 混合 模式 和 不 透明 度 后 ， 用 “画笔 工具 ”对 蒙 版 进行 编辑 ， 控 制图 像 的 显示 
泄 围 。 


党 5 不 得 明度: 44 
IE: 转 中国 填充 : 100% 
2 甘 时 8 出 。 背景 持 风 

2 图 层 1 拷 nm 


步骤 06 ”创建 新 图 层 填 元 颜色 


由 于 上 一 步 操作 中 降低 了 图 像 的 不 透明 度 ， 图 像 呈现 半 透 明 效 果 ， 因 此 创建 “图 层 2” 图 层 ， 设 置 前 景色 为 日 色 ， 按 下 快捷 
键 Alt+ Delete， 将 背景 填充 为 日 色 。 根 据 画 面 整体 布局 ， 再 适当 调整 指甲 油 手 的 位 置 。 


由 于 担 报时 光线 太 暗 ， 使 得 扣 报 出 来 的 商品 颜色 不 够 鲜艳 。 因 此 创建 “曲线 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 调整 曲 
线 的 形状 ， 提 亮 图 像 ， 加 强 对 比 ， 得 到 色彩 更 加 绚丽 的 指甲 油 瓶 图 像 。 


a 曲线 


Te: 


步骤 08 ”编辑 图 层 蒙 版 控制 调整 区 域 


观察 图 像 友 现 调 整 后 的 指甲 油 瓶 左 侧 的 高 光 位 置 出 现 了 局 部 曝光 过 度 的 情况 。 选 择 “ 男 笔 工 具 ”， 设置 前 景色 为 黑色 ， 用 较 
柔和 的 画笔 在 该 区 域 涂抹 ,还原 图 像 的 亮度 。 


lack 
5 “由 


步骤 09 设置 “色相 /饱和 度 ” 增 强 色 彩 


按 住 Ctrl 键 不 放 ， 单 击 “ 背 景 拷贝 ”图 层 蒙 版 ， 载 入 选区 。 新 建 “ 色 相 / 饱 和 度 1” 调 整 图 层 ， 打开“ 属性” 面板， 在 面板 中 
单 击 并 向 右 拖 岛 “色相 ” 滑 块 ， 使 画面 中 的 指甲 油 瓶 头 色 变 得 更 加 红 艳 。 


网 色相 /多 


步骤 10 ”添加 文字 与 图 形 


为 了 增强 图 像 的 表现 力 ， 可 以 运用 “ 横 排 文字 工具 ”在 指甲 油 瓶 未 上 角 位 置 输入 文字 。 输 入 后 根据 商品 的 特点 ， 将 突出 的 主 
体 文字 设置 为 与 指甲 颜色 相近 的 红色 ， 得 到 一 幅 简 单 的 促销 广告 图 片 。 


| "ansoff gel lack 


| | sr 


实例 65 ”用 图 形 探 制 商品 的 显示 沁 围 


矢量 蒙 版 是 从 钢笔 工具 绘制 的 路 径 或 形状 工具 绘制 的 矢量 图 形 中 生成 的 蒙 版 ， 它 与 分 辨 率 无 关 ， 可 以 任意 缩放 、 旋 转 和 扭 
曲 ， 而 不 产生 锯齿 。 在 设计 商品 详情 员 时 ， 经 常会 使 用 矢量 蒙 版 控制 图 像 的 显示 沁 围 ， 展 现 商 品 的 局 部 特 后 。 


素 材 随 书 资 源 \ 素 材 \07\19.jpg 


随 书 资源 \ 源 文件 \07\ 用 图 形 控制 商品 
的 显示 泄 围 .psd 


源 文 件 


步骤 01 打开 图 像 扩展 画布 效果 


打开 素材 文件 19jpg， 按 下 快捷 键 Ctrl+J」， 复 制图 层 。 执 行 “ 图 像 > 画布 大 小 ” 菜 音 命令， 打开“ 画布 大 小 ”对 话 框 ， 在 对 
话 框 中 调整 画布 的 宽度 和 高 度 ， 调 整定 位 后 单 击 “确定 ”按钮 ， 扩 展 画 布 。 


当前 支 路 ,: 88.59M 
宽度 52.92 厘米 
高 度 : 70.56 厘米 


新 建 大 小 : 14.6M 
离 度 (W): | 90 厘米 
高 麻 (H): |70.56 || 厘米 > 


相对 (R) 
定位 : + EE 
三” 一生 ， 


1 


画布 扩展 颜色 : | 背景 


步骤 02 创建 “矢量 蒙 版 " 


在 “图 层 1” 图 层 下 新 建 “图 层 2” 图 层 ， 设 置 前 景色 为 日 色 ， 按 下 快捷 键 At+ Delete， 将 背景 填充 为 前 景色 。 执 行 “ 图 层 > 
天 量 和 版 > 显示 全 部 ”菜单 售 令 ， 创 建 天 量 蒙 版 。 单 击 共 版 缩 唤 图， 选择 “ 息 形 工具 ”， 在 选项 栏 中 设置 绘制 模式 为 “路 径 ”， 
在 人 物 图 像 上 单 击 并 拖 折 鼠标 ， 绘 制 路 径 。 绘 制 后 路 径 以 外 的 区 域 会 被 隐藏。 


© TH 
不 透明 度 : 100% = 


TE: 100% = 


步骤 03 ” 单 击 蒙 版 变换 矢量 路 径 轮 万 


连续 按 下 快捷 键 Ctrl+J， 复 制 “ 图 层 1” 图 层 ， 得 到 “图 层 1 拷贝 ”和 “图 层 1 拷贝 2” 图 层 。 隐 藏 “ 图 层 1 拷贝 2” 图 层 后 ， 
单 击 “ 图 层 1 拷贝 ”图 层 右 侧 的 蒙 版 缩 筑 图 ， 选 择 “ 直 接 选 择 工 具 ”， 选 中 路 径 ， 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 ， 调 
整 路 径 ， 更 改 要 显示 的 对 象 汽 围 。 


步骤 04 ”继续 调整 蒙 版 并 添加 文字 


显示 “图 层 1 拷 贝 2” 图 层 ， 使 用 同样 的 方法 ， 对 路 径 的 形状 进行 调整 ， 显 示 衣 服 的 下 半 部 分 。 设 置 后 结合 图 形 绘制 工具 和 
文字 工具 在 画面 中 添加 文字 。 


[LT 


第 8 草 ” 主 图 与 直通 车 图 片 设计 


“ms we 7 
| SNMSUNG 
" 


温和 不 市 激 


9 星 效 保湿 


NMSUNG 三 归 昨 : 字 


pe 
he S6 


rg 一 人 入 


在 网 店 疼 修 中 ， 主 图 与 直通 后 图 片 是 顾客 对 一 件 商 品 的 第 一 印象 ， 它 们 是 吸引 顾客 进 店 浏览 的 关键 。 在 不 同 的 电 商 平 台中 ， 
主 图 的 尺寸 要 求人 存在 一 定 的 区 别 ， 在 设计 的 过 程 中 要 根据 具体 电 商 平台 的 尺寸 要 求 对 主 图 进行 调节 。 同 时 ， 在 设计 图 像 的 过 程 
中 ， 为 了 增强 主 图 的 表现 力 ， 可 以 根据 店铺 的 活动 动态 、 具 体 的 商品 内 容 ， 在 画面 中 添加 一 些 刺 激 客户 购买 欲望 的 文字 ， 如 超 低 
价 、 包 邮 、 惊 爆 价 等 ， 以 起 到 增加 商品 点 击 率 和 销量 的 作用 。 


66 ” 清 诡 风格 的 连衣裙 主 图 设计 
67” 绚 彩 保温 杯 主 图 设计 

68 ”轻松 活泼 的 奶粉 直通 车 图 设计 
69 干净 整洁 的 手机 主 图 设计 

70 ”彰显 美味 口感 的 曲 奇 饼 主 图 设计 
71 ”音色 风格 的 童鞋 直通 车 图 设计 
72 ”淡雅 风格 的 茶具 主 图 设计 


73 ”手机 洱 洗 面 奶 主 图 设计 


实例 66 ” 清 素 风格 的 连 衣 外 主 图 设计 


本 实例 是 为 某 品 牌 一 蒜 连 衣 裙 设计 的 主 图 。 在 设计 的 过 程 中 ， 为 了 突出 画面 中 间 的 模特 ， 对 背景 进行 模糊 处 理 ， 增 强 景 深 效 
果 ， 同 时 在 文字 的 处 理 上 及 用 了 连衣裙 上 的 颜色 ， 让 画面 中 的 图 像 与 文字 显得 更 加 协调 。 


素 材 随 书 资源 \ 泰 材 \08\01.jpg 


随 书 资源 \ 源 文件 \08\ 清 爽 风格 的 连 衣 
源头 件 。 裙 主 图 设计 .psd 


步骤 01 设置 并 新 建文 件 


启动 Photoshop 程 序 ， 执 行 “ 文 件 > 新 建 ” 菜 单 命令 ， 打开“ 新建” 对 话 框 ， 在 对 话 框 中 设置 文件 名 ,并 调整 新 建文 件 的 大 
小 ， 新 建 一 个 文件 。 为 了 方便 图 像 的 处 理 ， 可 以 将 尺寸 设置 得 稍 大 一 些 。 


名 称 (N); | 清新 色彩 主 图 设计 
文档 类 型 : | 自 定 _ 消 | 
六 小 存储 预 说 (5]. 
宽度 (W): | 1200 | | 俐 束 :| 内 除 预 设 ([ 
高度 (H): [1200 | [像素 
分 辩 率 (R): |72 || 像素 /英寸 


颜色 模式 : | RGB 颜色 *| [8 位 


背景 内 容 : | 白色 s|[ 


电池 
颜色 醒 置 文件 : | sRGB IEC61966-2.1 


像素 长 宽 比 : | 方形 像素 9 


步骤 02 将 素材 复制 到 新 建文 件 中 


打开 素材 文件 01jpg， 这 是 担 摄 的 模特 上 身 的 展示 效果 ， 把 图 像 复制 到 新 建 的 文件 中 ， 创 建 “ 商 品 照片 ”图 层 组 ， 将 图 层 组 
中 的 图 像 调整 至 合适 大 小 ， 然 后 水 平 翻转 图 像 。 


步骤 03 ”设置 “高 斯 模糊 ”增强 景深 


由 于 本 实例 是 为 服 六 设计 主 图 效果 ， 所 以 要 表现 的 主体 对 象 应 该 是 衣服 。 按 下 快捷 键 Ctrl+J， 复 制图 层 , 执行 “ 滤 镜 > 模糊 
> 高 斯 模糊 ”菜单 命令 ,打开 “ 高 斯 模糊 ”对 话 框 ， 在 对 话 框 中 设置 选项 ， 蛙 击 “ 确 定 ” 按 钮 ， 模 糊 图 像 。 


和 100%  @ 


半径 [R): 像素 


Ej 


步骤 04 用 “ 源 变 工具 ”编辑 图 层 蒙 版 


经 过 上 一 步 操作 ， 对 全 图 进行 了 模糊 。 为 了 突出 右 侧 的 主体 人 物 ， 为 “图 层 1 拷 贝 ” 图 层 添加 图 层 共 版 ， 选 择 “渐变 工 


具 ”， 在 选项 栏 中 设置 “ 黑 ， 日 渐变 ”， 从 图 像 右 侧 往 元 侧 拖 遇 绕 性 渐变 ， 还 原 清晰 的 主体 人 物 。 


步骤 05 用 “仿制 图 章 工具 ”去 除 育 景 杂 物 


模糊 图 像 后 发 现 背 景 图 像 略 显 凌乱 ， 所 以 按 下 快捷 键 Shift+ Ctrl+Alt+E， 盖 印 可 见 图 层 ， 创 建 “ 图 层 1 拷 贝 (合并 ) “ 
层 。 选 择 “仿制 图 章 工 具 ”， 按 住 Alt 键 不 放 ， 人 在 干净 的 育 景 位 置 单 击 ， 取 样 图 像 ， 然 后 在 杂乱 背景 位 置 涂抹 ， 仿 制 修复 图 像 。 


[he | : a \ 
玫 4 图 层 1 拷贝 (合并 ) 


‘Pp | 图 层 1 拷 风 


步骤 06 用 “ 污 上 操 修 复 画 笔 工 具 ” 修 复 肌 肤 瑕 兹 


继续 使 用 “仿制 图 草 工 具 ” 对 背景 进行 处 理 ， 得 到 更 干净 的 画面 效果 。 放 大 图 像 ， 检 查 友 现 模特 的 皮肤 上 还 有 一 些小 的 瑕 
狐 。 选 择 “ 污 点 修复 画笔 工具 ”， 人 在 瑕 羌 位 置 单 击 ， 修 复 图 像 ， 得 到 更 干净 的 肌肤 效果 。 


步骤 07 用 “磁性 套 索 工具 ”选择 衣服 


为 了 让 衣服 纹理 更 加 清晰 ， 选 择 “ 磁 性 套 达 工 具 ”， 沿 模特 穿着 的 衣服 边 绿 蛙 击 并 拖 忠 ， 选 择 衣服 图 像 ， 再 单 击 “从 选区 减 


去 ”按钮 ， 在 选择 的 皮肤 位 置 单 击 并 拖 蝶 鼠标 ， 调 整 选区 沁 围 ， 获 得 更 精细 的 选择 效果 。 


步骤 08 ”转换 为 智能 对 象 图 层 


经 过 连续 的 单 击 并 拖 灸 操作， 调整 选择 汽 围 ， 选 择 更 完整 的 蚀 子 效果 。 按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 图 像 ， 得 到 “图 层 
2” 图 层 。 执 行 “ 图 层 > 智能 对 象 > 转换 为 智能 对 象 ” 荣 单 命令 ， 把 图 层 转换 为 智能 对 象 图 层 。 


步骤 09 ”设置 “USM 锐 化 ” 滤 镜 锐 化 主体 


执行 “ 滤 镜 > 锐 化 >USM 锐 化 ”菜单 命令 ,打开 “USM 锐 化 ”对 话 框 ， 在 对 话 框 中 参照 上 方 的 预 金 图 设置 锐 化 选项 。 设 置 
完成 后 单 击 “ 确 定 ” 按 钮 ， 锐 化 图 像 ， 让 画面 中 的 连衣裙 变 得 更 加 清晰 。 


总 100% 也 


数量 (A): |44 | Wm 
半径 (R): |5.0 ] 像素 
疗 值 (T): |0 | 色 阶 


步骤 10 ”设置 “上 自然 饱和 度 ” 增 强 色彩 


为 了 让 照 厂 中 主体 图 像 的 颜色 更 加 鲜 格 ， 单 击 “ 调 整 ” 面 板 中 的 “ 目 然 饱和 度 ” 按 钮 ， 新 建 “ 目 然 饱 和 度 1” 调 整 图 层 ,在 
打开 的 “属性 ”面板 中 单 击 并 向 右 拖 忠 “ 目 然 饱和 度 ” 疹 块 ， 增 强 色 彩 。 


六 四 自然 饱和 讼 


步骤 11 用 “画笔 工具 ”编辑 蒙 版 


由 于 只 需要 对 馈 子 和 和 人 物 部 分 的 颜色 进行 调整 ， 因 此 单 击 “ 自 然 饱 和 度 1” 图 层 蒙 版 ， 选 择 “ 男 笔 工 具 ”， 设置 前 景色 为 黑 
色 ， 用 画笔 在 除 人 物 和 衣服 外 的 背景 处 涂抹 ， 还 原 涂抹 区 域 的 图 像 颜 色 。 


调整 颜色 后 发 现 模 特 的 皮肤 显得 共 蝗 ， 不 够 红润 ， 需 要 进行 润色 。 新 建 “ 选 取 颜 色 1” 调 整 图 层 , 打开 “属性 ”面板 。 由 于 
皮肤 颜色 主要 表现 为 红色 和 黄色 ， 所 以 在 “颜色 ”下 拉 列 表 框 中 分 别 选择 “红色 ”和 和 “黄色” 选项， 选择 后 调整 其 颜色 百分比 ， 
控制 油墨 比 。 


= | 


1 一 一 er 估 左 L 记 大 己 [万 庆生 册 户 
使 用 田 笔 编辑 图 层 双 版 
已 3 用 攻 世 |/ 冯 和 于 几 信 


单 击 “选取 颜色 1” 图 层 蒙 版 ， 选 择 “画笔 工具 ”， 设 置 前 景色 为 黑色 ， 在 模特 的 头 友 上 面 涂 抹 ， 还 原 涂抹 区 域 的 颜色 。 经 
过 反复 的 涂抹 ,还 原 头 友 颜色 ， 展 现 更 加 红润 自然 的 皮肤 颜色 。 


步骤 14 ”绘制 时 形 输入 文字 


经 过 前 面 的 操作 ， 完 成 了 主 图 图 像 的 制作 。 为 了 让 设计 的 主 图 更 有 吸引 力 ， 需 要 为 其 添加 简单 的 促销 信息 。 选 择 “ 和 窍 形 工 


具 ”， 在 选项 栏 中 设置 工具 选项 ， 然 后 在 模特 旁边 的 育 景 上 单 击 并 拖 遇 鼠 标 ， 绘 制 一 个 矩形 ， 用 “ 棋 排 文字 工具 ”在 起 形 中 输入 
文字 。 


步骤 15 设置 文字 效果 


为 了 让 画面 的 色调 与 风格 更 统一 ， 选 中 文字 图 层 ， 打开 “字符 ”面板 ， 在 面板 中 对 文字 的 字体 、 字 号 及 颜色 进行 调整 。 


字 付 
方正 里 体 _GBK.,， 


T[ 5 点 


100% 


0 局 


选择 “ 模 排 文字 工具 ”， 在 已 输入 的 文字 下 方 再 添加 文字 “ 热 销 新 品 ”。 输 入 后 为 了 让 文字 的 主 次 天 系 更 突出 ， 打 开 “ 字 
符 ” 面 板 ， 调 整 文字 的 大 小 等 属性 。 


字符 


万 正 未 体 _GBK... 


壁 妊 对 行 一 件 搞定 


如 果 画 面 的 文字 颜色 相同 ， 则 要 突出 的 主要 信息 很 容易 被 忽略 ， 所 以 这 里 为 了 突出 此 馈 子 为 热 销 商品 ， 选 择 “ 横 排 文 字 工 
具 ”， 在 文字 “ 热 销 ” 二 字 上 单 击 并 拖 折 ， 将 其 选取 ， 然 后 打开 “字符 ”面板 ， 将 文字 颜色 更 改 为 鲜艳 的 梅 色 。 


行 一 件 搞定 
二 FF 口 


步骤 18 使 用 “椭圆 工具 ”绘制 图 形 


很 多 顾客 都 有 贫 便 宜 的 心理 ， 所 以 可 以 在 画面 中 添加 优惠 信息 。 选 择 “ 椭 圆 工具 ”， 在 选项 栏 中 对 绘制 图 形 的 颜色 进 
置 ， 然 后 在 画面 中 单 击 并 拖 忠 鼠标 ， 绘 制 渐变 的 圆 形 。 


i 盛夏 出 行 一 件 搞定 


加 [L] 国 < 三 四 
产品 
FF 了 了 

i, EIA 


不 透明 度 : 


国 
108 


步骤 19 ”复制 图 形 设 置换 边 效 果 


按 下 快捷 键 Ctrl+j 


Shift+ Ctrl 键 不 放 ， 单 击 并 拖 曙 鼠标 ， 等 比例 缩小 图 形 。 用 “和 直 
页 ， 得 到 著 加 的 图 形 效 果 ，。 


制 一 个 圆 形 ， 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 ， 


将 鼠标 移 全 复制 的 圆 形 的 右 下 角 ， 按 住 
择 工 具 ” 选 中 中 间 小 一 些 的 加 ， 在 选项 栏 中 调整 填充 和 


择 “ 横 排 文字 工具 ” 


在 圆 形 中 间 输 入 价格 158。 为 了 让 价格 更 加 醒目 ， 打 开 “ 字 符 ” 面 板 ， 将 文字 字体 设置 为 较 粗 
的 “方正 综艺 简体 ”， 并 把 字号 调 大 。 设 置 后 运用 “变换 ”命令 适当 旋转 文字 效果 
下 综 己 间 体 ,… 
50 后 


继续 结合 “ 横 排 文字 工具 ”和 “字符 ”面板 ， 在 画面 中 输入 更 多 文字 。 输 入 后 在 “图 层 ” 面 板 中 会 显示 对 应 的 文字 图 层 。 
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实例 67” 绚 彩 保温 杯 主 图 设计 


本 实例 是 为 某 品 牌 保温 杯 设计 的 主 图 。 在 设计 的 过 程 中 ， 考 虑 到 保温 杯 的 实际 情况 ， 通 过 对 担 摄 的 保温 杯 颜 色 进 行 调整 ， 用 
多 种 颜色 表现 该 球 保温 杯 丰 富 的 颜色 蒜 式 ， 让 顾客 有 更 多 的 选择 空间 ， 同 时 将 店铺 名 称 和 品牌 徽标 放 于 画面 左上 角 ， 突 显 品 牌 文 
化 。 


全 印象 保温 林 


随 书 资源 \ 素 材 \08\02.jpg 
随 书 资源 \ 源 文件 \08\ 绚 彩 保温 杯 主 图 设计 .psd 


步骤 01 ”新 建文 件 绘制 渐变 起 形 


局 动 Photoshop 程 序 ， 新 建 一 个 文件 。 选 择 “ 和 埠 形 工具 ”， 在 画面 下 方 绘制 一 个 埠 形 ， 然 后 在 选项 栏 中 将 填充 赢 色 设置 为 


从 R245、G246、B246 到 白色 的 渐变 效果 。 


步骤 02 ”设置 “局 斯 模糊 ” 滤 镜 模糊 图 像 


为 了 让 绘制 的 图 形 边缘 不 那么 生硬 ， 可 以 对 图 形 进行 模糊 。 执 行 “ 渡 镜 > 模 糊 > 高 斯 模糊 ”菜单 命令 ,打开 “高 斯 模糊 ”对 
话 框 ， 在 对 话 框 中 设置 较 小 一 些 的 “半径 ” 值 ， 使 图 像 边缘 更 柔和 。 
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步骤 03 ”使 用 “ 目 形 工具 ”绘制 渐变 矩形 
景色 设置 为 R245、G246、B246， 选 择 “ 和 起 形 工具 ”， 单 击 选 项 栏 中 “ 填 元 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 列表 中 设置 


将 月 J 


填充 头 色 为 “前 景色 到 透明 渐变 ”， 从 图 像 中 间 同 下 拖 忠 女 标 ， 绘 制 渐变 矩形 。 
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步骤 04 ”复制 图 像 绘 制 路 径 


面 几 步 操作 ， 确 定 了 背景 基调 ， 下 面 需 要 添加 主体 商品 。 打 开 素 材 文 件 02jpg， 将 打开 的 图 像 复 制 到 画面 中 间 位 置 。 


月 只 


经 过 
经 过 前 面 
由 于 这 里 只 需要 保留 主体 商品 ， 所 以 运用 “钢笔 工具 ” 沿 主 体 图 像 绘制 路 径 。 


步骤 02? ”将 路 径 转换 为 选区 抠 出 图 像 


绘制 完成 后 按 下 快捷 键 Ctrl+ Enter， 将 绘制 的 路 径 转 换 为 选区 。 单 击 “ 图 层 ” 面 板 底 部 的 “添加 图 层 蒙 版 ”按钮 ， 添 加 蒙 
版 ， 将 选区 外 的 图 像 隐藏 起 来 。 


步骤 06 ”复制 图 层 更 改 混合 模式 


为 了 让 保温 杯 与 新 背景 合成 的 效果 更 目 然 ,将 “保温 杯 ” 图 层 的 混合 模式 设置 为 “正片 艾 底 ”。 按 下 快捷 键 Ctrl+J， 复 制图 
层 ， 得 到 “保温 杯 拷贝” 图 层 ， 将 此 图 层 的 混合 模式 调整 为 “正常 ”。 单 击 其 右 侧 的 图 层 蒙 版 ， 用 黑色 辆 笔 在 保温 杯 边缘 处 涂 
抹 ， 隐 藏 图 像 ， 得 到 半 透 明 的 杯 边 沿 效果 。 
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步骤 07 设置 “曲线 ”降低 图 像 亮 度 


原 照片 中 的 保温 杯 偏 亮 ， 颜 色 看 起 来 不 是 很 艳丽 ， 因 此 按 住 Ctrl 键 不 放 ， 单 击 “ 保 温 杯 ”图 层 缩 览 图 ， 载 入 选区 。 在 图 像 最 
上 层 创建 “曲线 1” 调 整 图 层 ,， 打开“ 属性 ”面板 ， 单 击 并 向 下 拖 钨 曲线 ， 降 低 选 区 内 的 杯子 亮度 。 
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步骤 08 载 入 选区 调整 “ 色 阶 " 


按 住 Ctrl 键 不 放 ， 单 击 “ 曲 线 1” 图 层 蒙 版 ， 载 入 选区 。 再 次 选中 男 面 中 的 杯子 图 像 ， 新 建 “ 色 阶 1” 调 整 图 层 ， 在 打开 
的 “属性 ”面板 中 单 击 “ 预 设 ” 下 搁 按钮， 选择“ 增加 对 比 硫 2” 选项， 增强 对 比 。 这 时 可 以 看 到 画面 中 的 杯子 看 起 来 更 有 质感 
J 


ui OY 名 及 


增加 对 比 度 2 


RGB 


步骤 09” 盖 印 图 层 


选择 “保温 杯 ” 及 上 方 的 所 有 调整 图 层 ， 按 下 快捷 键 Ctrl+Alt+E， 盖 印 选中 的 图 层 ， 得 到 “ 色 阶 1 (合并 ) ”图 层 。 按 下 快 
捷 键 Ctrl+J， 复 制图 层 ， 创 建 “ 色 阶 1 (合并 ) 拷贝 ”图 层 , 分别 调整 这 两 个 图 层 中 杯子 的 位 置 ， 创 建 并 排 效 果 。 


色 防 1 


曲线 1 


步骤 10 设置 “色相 /饱和 度 ” 变 换 色 彩 


由 于 这 蒜 杯 子 还 有 绿色 和 蓝 色 蒜 ， 为 了 让 顾客 感受 不 同 头 色 的 杯子 效果 ， 可 以 将 复制 的 杯子 图 像 调 整 为 与 实物 相近 的 颜色 ，。 
按 住 Ctrl 键 不 放 ， 单 击 “ 色 阶 1 (合并 ) ”图 层 , 载 入 选区 。 新 建 “ 色 相 / 饱 和 度 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 拖 
护 “色相 ”和 “饱和 度 ” 滑 块 ， 更改 杯子 颜色 。 


国 色相 / 候 和 度 


步骤 11 设置 “曲线 ”降低 图 像 亮 度 

调整 颜色 后 发 现 杯子 的 质感 并 不 强 ， 可 以 对 它 的 影 调 进 行 调 整 。 载 入 与 上 一 步 相同 的 选区 ， 新 建 “ 曲 线 2” 调 整 图 层 ， 打 
开 “ 属 性 ”面板 ， 单 击 并 向 下 拖 蝶 曲线 ， 降 低 杯 子 图 像 的 亮度 。 
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步骤 12 设置 “色相 /饱和 度 ” 变 换 颜色 


完成 最 左 侧 杯 子 图 像 颜 色 的 设置 ， 接 下 来 是 右 侧 杯子 图 像 的 颜色 调整 。 按 住 Ctrl 键 不 放 ， 单 击 “ 色 阶 1 (合并 ) ”图 层 ， 载 
入 选区 。 新 建 “ 色 相 / 饱 和 硫 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 拖 折 “色相 ”和 “饱和 度 ” 滑 块 ， 将 保温 杯 颜 色 设置 为 与 商 
品 相同 的 绿色 。 


图 色相 /饱和 度 


步骤 13 ”使 用 “曲线 ”调整 图 像 亮度 


按 住 Ctrl 键 不 放 ， 单 击 “ 色 相 / 饱 和 度 2” 调 整 图 层 ， 载 入 选区 。 新 建 “ 曲 线 3” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 单 击 并 
同 下 拖 忠 曲线 ， 降 低 绿 色 保 温 杯 图 像 的 亮度 。 


步 又 14 ”重印 图 像 设 置 倒影 


为 了 让 制作 的 保温 杯 呈 现 立 体 的 视 党 效果， 可 以 为 其 添加 投影 效果 。 选 中 “保温 杯 ” 图 层 和 以 上 的 所 有 图 层 ， 按 下 快捷 键 
Ctrl+Alt+E， 盖 印 选中 的 图 层 ， 得 到 “曲线 3 (合并 ) ”图 层 。 执 行 “ 编 辑 > 变换 > 答 直 翻转 ”菜单 命令 ， 翻 转 图 像 。 
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步骤 15 用 “渐变 工具 ”编辑 图 层 蒙 唉 


为 了 使 投影 显得 更 为 通 真 ， 单 击 “ 曲 绪 3 (合并 ) ”图 层 ， 为 此 图 层 添加 图 层 蒙 版 。 选 择 “渐变 工具 ”， 在 “渐变 ” 拾 色 器 
中 选择 “ 黑 ， 日 渐变 ”， 从 图 像 下 方 往 上 拖 忠 ， 当 拖 忠 至 一 定位 置 后 释放 鼠标 ， 隐 藏 图 像 。 
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步骤 16 ”添加 文字 和 品牌 徽标 


最 后 为 加 深 品 牌 印 象 ， 选 择 “ 自 定形 状 工具 ”， 在 画面 左上 角 绘 制品 牌 徽标。 选择 “ 横 排 文字 工具 ”， 输 入 文字 “印象 保温 


杯 ”。 人 至 此 ， 已 完成 该 商品 主 图 的 设计 。 


各, 印象 保温 本 


实例 68 ”轻松 活泼 的 奶粉 直通 车 图 设计 


本 实例 是 为 某 品牌 奶粉 设计 的 直通 车 图 像 。 在 设计 的 过 程 中 ， 根 据 奶 源 纯净 无 污染 的 特征 ， 用 绿色 作为 设计 的 基调 ， 既 给 顾 
客 留 下 好 的 印象 ， 也 与 奶粉 的 包 妆 风 格 一致 ， 同 时 在 画面 中 添加 简单 的 文字 加 以 补 宛 说 明 ， 增 强 了 画面 的 完整 性 ， 也 能 让 顾客 了 
解 更 多 有 价值 的 信息 。 
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素 材 随 书 资源 \ 素 材 \08\03、04.jpg 


随 书 资源 \ 源 文件 \08\ 轻 松 活 泼 的 奶粉 


源 文件 直通 车 图 设计 .psd 


启动 Photoshop 程 序 ， 新 建 一 个 文件 。 由 于 此 实例 是 为 小 宇 宇 食用 的 奶粉 制作 一 个 直通 车 图 展示 效果 ， 为 了 迎合 安全 、 健 
康 的 主题 ， 将 前 景色 设置 为 R107、G195、B42,， 设置 后 新 建 “ 图 层 1” 图 层 ， 按 下 快捷 键 Alt+ Delete， 将 背景 填充 为 绿色 ，。 


[| | 只 有 Web 曾 色 


打开 素材 文件 03.jpg， 将 图 像 中 的 牛奶 抠 取 出 来 作为 主 图 背景 。 观 察 图 像 友 现 牛 奶 颜 色 与 蓝 色 背景 颜色 反差 明显 ， 因 此 选 
用 “吸管 工具 ”在 日 色 的 牛奶 位 置 单 击 ， 取 样 颜色 ，。 


执行 “选择 > 色彩 范围 ”菜单 命令 ,打开 “色彩 荡 围 ”对 话 框 。 在 对 话 框 中 根据 取样 颜色 设置 选择 范围 ， 但 是 发 现 牛 奶 中 间 
还 有 一 部 分 没有 被 选中 ， 所 以 单 击 “添加 到 取样 ”按钮 ， 继 续 在 黑色 的 牛奶 处 单 击 。 


选择 [C): | 只 取样 颜色 | | 选择 [CO): | 只 取样 颜色 
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选择 范围 (E) 。 口 图 像 (M) 本 选择 范围 人 E) 


选区 预览 : | 无 - 选区 预览 ; 无 


步骤 04 ”调整 选择 沁 围 创建 选区 


通过 运用 “添加 到 取样 ”工具 连续 单 击 牛奶 图 像 ， 选 中 整个 图 像 中 的 牛奶 ， 再 单 击 “ 确 定 ” 按 钮 ， 返 回 图 像 窗口 。 根 据 设 置 
的 选择 沁 围 ， 选 中 了 牛奶 图 像 。 


访 择 [CY: | 坟 | 


检测 大 胜 | 本 地 化 颜色 这 公 ) 
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步骤 05 ”复制 选区 内 的 图 像 


选择 “移动 工具 ”， 把 选区 中 的 牛奶 图 像 拖 蝶 至 绿色 的 背景 图 像 上 ， 得 到 “图 层 2” 图 层 ， 完 成 背景 图 像 的 制作 。 下 面 需 
在 背景 上 添加 商品 ， 打 开 素 材 文 件 04.jpg， 将 图 像 复制 到 新 建 的 文件 中 。 


步骤 06 添加 图 层 蒙 版 


添加 奶粉 图 像 后 ， 需 要 把 奶粉 旁边 的 灰色 背景 去 挥 ， 抠 出 奶粉 部 分 。 为 了 让 抠 出 的 商品 更 完整 、 干 净 ， 选 择 “ 钢 笔 工 具 ” 
沿 画面 中 的 奶粉 桶 绘制 封闭 的 工作 路 径 ， 绘 制 路 径 后 按 下 快捷 键 Ctrl+Enter， 将 路 径 转换 为 选区 。 单 击 “ 添 加 图 层 蒙 版 ”按钮 ， 
添加 家 版 ， 隐 藏 灰 色 育 景 图 像 。 


步骤 07 设置 “内 发 光 ” 样 式 


放大 图 像 ， 发 现 奶粉 梯 边 绿 部 分 显示 为 日 色 ， 与 绿色 的 背景 衔接 不 自然 。 执 行 “ 图 层 > 图 层 样式 > 内 友 光 ”菜单 命令 ， 打 
“图 层 样 式 ” 对 话 框 。 在 对 话 框 中 将 发 光 颜 色 设 置 为 与 背景 闫 色 相近 的 绿色 ， 表 调整 友 光 选项 ， 设 置 后 单 击 “确定 ”按钮 ， 修 
饰 边 绿 颜色 。 
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步骤 08 使 用 “污点 修复 画笔 工具 ”修复 瑕 症 
由 于 保存 不 当 ， 在 奶粉 桶 上 出 现 了 一 些小 的 划 痕 、 斑 点 。 选 择 “ 污 点 修复 画笔 工具 ”， 在 这 些 污点 瑕 六 处 单 击 ， 修 复 两 品 图 
像 上 的 瑕 症 。 


反 巧 提示 : 调整 画笔 笔触 大 小 


用 “污点 修复 画笔 工具 修复 商品 瑕 疫 时 ， 可 以 按键 盘 中 的 [或 ] 键 ， 调 整 画笔 笔触 大 小 ， 以 获得 更 精细 的 图 像 修复 效果 。 


步骤 09 ”复制 图 像 删除 “内 友和 光 ” 样 陈 


因为 拍摄 原因 ， 画 面 中 的 奶粉 桶 锐 化 不 够 ， 图 像 不 是 很 清晰 ， 需 要 进行 锐 化 。 锐 化 前 按 住 Ctrl 键 单 击 03 图 层 蒙 版 ， 载 入 奶粉 
桶 选区 。 按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 奶粉 桶 ， 得 到 “图 层 3” 图 层 。 删 除 图 层 下 的 “内 发 光 ” 样式 ， 并 将 图 层 转 换 为 智能 
对 象 图 层 ， 以 便 查 看 和 调整 锐 化 效果 ， 


步骤 10 ”设置 锐 化 滤 镜 获取 清晰 图 像 


执行 “ 滤 镜 > 模糊 > 表面 模糊 ”菜单 命令 ,打开 “表面 模糊 ”对 话 框 ， 在 对 话 框 中 设置 选项 ， 模 糊 图 像 ， 去 除 噪点 ， 让 男 面 
更 干净 。 再 执行 “ 渡 镜 > 锐 化 >USM 锐 化 ”菜单 命令 ,打开 “USM 锐 化 ”对 话 框 ， 在 对 话 框 中 设置 选项 ， 单 击 “ 确 定 ” 按 钮 ， 
锅 化 图 像 。 
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步骤 11 使 用 “画笔 工具 ”编辑 图 层 蒙 版 


这 里 只 需要 突出 商品 中 的 重点 信息 ， 因 此 为 “图 层 3” 图 层 添 加 图 层 蒙 版 ， 选 择 “画笔 工具 ”， 将 前 景色 设置 为 黑色 ， 在 奶 
粉 桶 边缘 部 分 涂抹 ， 还 原 图 像 的 清晰 度 。 
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EE = UA 


步骤 12 设置 “曲线 ”提高 图 像 的 亮度 


由 于 提 摄 时 光线 不 足 ， 导 致 担 报 出 来 的 画面 整体 偏 瞳 ， 在 处 理 时 需要 将 它 的 亮度 提高 ， 呈 现 奶 粉 桶 最 上 自然 的 状态 。 按 住 Ctrl 
键 不 放 ， 单 击 “ 图 层 3” 图 层 缩 虎 图 ， 载 入 奶粉 桶 选区 。 新 建 “ 曲 线 1” 调 整 图 层 ， 打 开 “ 属 性 ”面板 ， 在 面板 中 单 击 并 向 上 抑 


蝶 曲 线 ， 提 亮 图 像 。 
a © :3: 
自 定 
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步骤 13 ”调整 “亮度 /对 比 度 ” 


再 次 按 住 Ctrl 键 不 放 ， 单 击 “ 曲 线 1” 图 层 蒙 版 ， 载 入 选区 。 新 建 “ 亮 度 / 对 比 度 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 设 


置 “ 亮 度 ” 为 12， 进 一 步 提 亮 图 像 。 


:Gf- 高 度 对比 度 


使 用 旧 秘 


步骤 14 根据 “色彩 范围 ”控制 调整 学 围 


用 “亮度 /对 比 度 ” 提 亮 图 像 后 ， 发 现 奶粉 桶 的 部 分 区 域 轻微 曝光 过 度 ， 因 此 选择 “图 层 3” 图 层 ， 按 住 Ctr| 键 不 放 , 单 
击 “ 图 层 3” 图 层 缩 览 图 ， 载 入 选区 。 执 行 “选择 > 色彩 范围 ”菜单 命令 ， 打 开 “ 色 彩 范围 ”对 话 框 ， 在 对 话 框 中 选择 “高 
光 ” 选 项 ， 单 击 “ 确 定 ”按钮 ， 创 建 选区 。 单 击 “ 亮 度 /对 比 度 1” 图 层 蒙 版 ， 按 下 快捷 键 Alt+ Delete， 将 选区 填充 为 黑色 。 
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步骤 15 设置 “ 色 阶 ” 提 亮 中 间 调 区 域 


按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 3” 图 层 缩 览 图 ， 载 入 选区 。 在 图 像 最 上 方 创建 “ 色 阶 1” 调 整 图 层 ,， 打开“ 属性 ”面板 ， 在 面 


板 中 单 击 并 向 右 拖 忠 灰色 滑 块 ， 降 低 中 间 调 部 分 的 亮度 。 
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步骤 16 调整 图 层 蒙 版 还 原 图 像 


经 过 上 一 步 操作 ， 画 面 中 的 奶粉 桶 变 得 太 暗 了 ， 而 此 处 只 需要 降低 高 光 部 分 图 像 的 亮度 。 因 此 ， 按 住 Ctrl 键 不 放 ， 单 击 “ 图 
层 3” 图 层 缩 览 图 ， 载 入 选区 。 执 行 “ 选 择 > 色 彩 范围 ”菜单 命令 ,打开 “色彩 范围 ”对 话 框 ， 在 对 话 框 中 选择 “高 光 "” 
单 击 “ 确 定 ” 按 钮 ， 创 建 选 区 。 反 选 选区 后 ， 单 击 “ 亮 度 / 对 比 度 1” 图 层 蒙 版 ， 按 下 快捷 键 Alt+ Delete， 将 选区 填充 为 黑色 。 
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步骤 17 设置 “色彩 平衡 ”修饰 颜色 


为 了 让 奶粉 桶 的 颜色 更 吸引 人 ， 还 要 对 它 的 颜色 进行 调整 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 3” 图 层 缩 哆 图 ， 载 入 选区 。 在 图 
像 最 上 万 新 建 “ 色 彩 平衡 1” 调 整 图 层 ， 打开“ 属性” 面板， 在 面板 中 分 别 选择 “高 光 ” 和 “中 间 调 ”选项 ， 疝 右 拖 忠 “洋红 、 
绿色 ” 滑 块 ， 添 加 绿色 ， 让 奶粉 桶 的 颜色 显得 更 加 翠绿 。 
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步骤 18 ”设置 “可 选 颜 色 ” 增 强 颜色 反差 


再 次 载 入 相同 的 选区 ， 新 建 “选取 颜色 1” 调 整 图 层 , 打开 “属性 ”面板 ， 在 面板 中 选择 “黄色 ”选项 ， 调 整 颜色 日 分 比 ， 
增强 颜色 反差 。 
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步骤 19 使用“ 曲线” 提 驶 画面 


载 入 奶粉 桶 选区 ， 创 建 “ 曲 线 2” 调 整 图 层 ， 打 开 “ 属 性 ”面板 ， 在 面板 中 单 击 并 向上 拖 暇 曲线 ， 进 一 步 提 亮 图 像 ， 统 一 男 
面色 调 。 


步骤 20” 兰 印 图 像 并 添加 文字 


选择 “图 层 3” 及 该 图 层 以 上 的 所 有 图 层 ， 按 下 快捷 键 Ctrl+Alt+E， 盖 印 选 中 的 图 层 。 为 盖 印 图 层 添 加 图 层 蒙 版 ， 结 合 “ 淹 
变 工 具 ” 编 辑 图 层 蒙 版 ， 为 奶粉 桶 设置 倒影 效果 。 设 置 后 选用 “ 直 排 文字 工具 ”在 奶粉 桶 右 侧 输 入 规则 的 黑体 文字 。 


Re* 


步 又 21 设置 “投影 ”图 层 样式 


输入 后 为 了 让 文字 表现 出 立体 的 视 完 效果 ,双击 文字 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ,设置 “投影 ”样式 。 最 后 结合 文字 工 


具 和 “ 圆 角 息 形 工具 ”在 画面 中 添加 更 多 文字 和 图 形 。 
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实例 69 干净 整洁 的 手机 主 图 设计 


本 实例 是 为 手机 设计 的 商品 主 图 。 在 设计 的 过 程 中 ， 为 了 突出 销售 的 商品 ， 将 手机 抠 取 出 来 ， 通 过 对 手机 正面 和 背面 的 展 
示 ， 给 顾客 留 下 更 深刻 、 和 直观 的 印象 ,同时 由 于 拍摄 时 手机 屏幕 处 于 关闭 状态 ， 屏 幕 中 出 现 了 一 些 灰 竺 、 杂 后， 因此 在 处 理 时 进 


行 了 厦 损 ， 增 强 了 手机 图 像 的 美观 度 。 
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步骤 01 复制 图 像 绘 制 路 径 


启动 Photoshop 程 序 ， 执 行 “ 文 件 > 新 建 ”菜单 命令 ,新 建 一 个 文件 。 打 开 素 材 文 件 05.jpg， 将 手机 照 厂 复制 到 新 建 的 文件 
中 ， 命 名 为 “手机 背面 ”。 为 了 让 画面 更 和 干净， 需要 把 旁边 的 背景 去 挥 。 选 择 “ 钢 笔 工 具 ”， 沿 照片 中 的 手机 边缘 绘制 封闭 的 路 


pA 
1 人 全 。 


@ 精 = | o 面 = 


SAMSUNG ] SAMSUNG 


步骤 02 将 路 径 转 换 为 选区 


按 下 快捷 键 Ctrl+Enter， 将 绘制 的 路 径 转换 为 选区 。 单 击 “ 图 层 ” 面 板 中 的 “添加 图 层 芝 版 ”按钮 ， 为 图 层 添 加 图 层 蒙 版 ， 
将 手机 和 旁边 多 余 的 育 景 隐藏 起 来 。 


DO 转 = 


SNMSUNG 


oo = 


SNMSUNG 
-i J | 


china Mobile 4 


步骤 03 创建“ 黑 日 ”调整 图 层 


手机 背面 本 来 是 日 色 的 ,但 是 受到 环境 因素 影响 显示 为 淡淡 的 黄色 。 为 了 还 原 其 闸 色 ， 单 击 “ 调 整 ” 面 板 中 的 “ 黑 日 ”按钮 
回 ,， 新建 “黑白 1” 调 整 图 层 ， 将 手机 背面 转换 为 黑白 效果 。 
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2 少 jJ 开 U4 马帮 团 家 上 昭和 答 全 | 浆 昌 之 


从 图 像 上 看 ， 手 机 显得 很 暗 ， 没 有 光泽 感 ， 所 以 需要 对 它 的 明暗 进行 处 理 。 按 住 Ctrl 键 不 放 ， 单 击 “ 手 机 背面 ”图 层 缩 览 
图 ， 载 入 手机 选区 。 新 建 “ 曲 线 1” 调 整 图 层 ， 打开“ 属性 ”面板 ， 在 面板 中 添加 并 向 上 拖 蝶 曲线 控制 点 ， 提 亮 图 像 。 
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按 住 Ctrl 键 不 放 ， 单 击 “ 手 机 背面 ”图 层 缩 哆 图 ， 载 入 选区 。 单 击 “ 曲 线 1” 图 层 蒙 版 ,选择 “渐变 工具 ”， 在 选项 栏 中 选 


中 “ 黑 ， 和 白 渐变 ” ， 从 选区 右 侧 往 左 侧 拖 擅 线性 渐变 ， 隐 藏 曲线 调整 ， 提 高 手机 右 侧 边 缘 部 分 图 像 的 亮度 . 
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步 又 06 调整 “ 色 阶 ” 增 强 对 比 效果 


按 住 Ctrl 键 不 放 ， 单 击 “ 手 机 背面 ”图 层 缩 克 图 ， 载 入 选区 。 新 建 “ 色 阶 1” 调 整 图 层 ,， 打开“ 属性 ”面板 ， 在 面板 中 向 右 
拖 擅 黑色 滑 块 ， 使 阴影 部 分 变 得 更 暗 ; 向 左 拖 蝶 灰色 滑 块 ， 让 中 间 调 部 分 变 亮 ;向 左 拖 忠 日 色 滑 块 ， 使 高 光 部 分 变 得 更 亮 。 
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步骤 07 打开 图 像 绘 制 路 径 


元 成 手机 背面 的 处 理 后 ， 接 下 来 需要 添加 手机 正面 效果 。 打 开 素 材 文 件 06.jpg， 将 打开 的 图 像 复制 到 新 建 的 主 图 文件 中 ， 命 
名 为 “手机 正面 ”。 选 用 “钢笔 工具 ” 治 手机 边 绿 绘制 路 径 ， 按 下 快捷 键 Ctrl+Enter， 将 路 径 转换 为 选区 ， 并 添加 图 层 共 版 ， 隐 


藏 多 余 的 背景 图 像 。 
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步骤 08 ”调整 手机 正面 影 户 


为 了 让 手机 正面 颜色 更 统一 ， 按 住 Ctrl 键 不 放 ， 单 击 “ 手 机 正面 ”图 层 缩 虎 图， 载 入 选区 。 单 击 “ 调 整 ”面板 中 的 “ 黑 
日 ”按钮 ， 新 建 “ 黑 日 1” 调 整 图 层 ， 将 手机 正面 转换 为 黑 日 效果 。 再 创建 “亮度 /对 比 度 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 
中 设置 参数 ， 提 高 图 像 的 亮度 和 对 比 度 。 
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步骤 09 ”设置 “ 曝 ;6 硫 ” 提 腕 手机 正面 


经 过 调整 ,发 现 手机 还 是 不 够 亮 ,， 给 人 的 感 党 很 不 干 学 。 因 此 再 次 载 入 “手机 正面 ”选区 ， 新 建 “ 曝 光度 1” 调 整 图 层 ， 打 
开 “ 属 性 ”面板 ， 单 击 并 向 右 拖 忠 “曝光 度 ” 滑 块 ， 提 亮 手 机 正面 。 
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按 下 快捷 键 Ctrl+ + ， 放 大 图 像 ， 可 以 看 到 黑色 的 手机 屏幕 上 有 一 些 细小 的 多 侍 ， 影 响 画面 的 效果 。 选 择 “ 圆 角 息 形 工 


具 ”， 在 黑色 的 手机 屏幕 位 置 单 击 并 拖 中 鼠标， 绘制 一 个 “半径 ”为 5 像素 的 圆 角 和 矩形 。 


打开 素材 文件 07.jpg， 将 打开 的 图 像 复 制 到 手机 屏幕 上 方 ， 按 下 快捷 键 Ctrl+T， 打 开 上 自由 变换 编辑 框 ， 将 屏幕 壁纸 调整 至 比 


手机 屏幕 稍 大 一 些 。 执 行 “ 图 层 > 创建 剪贴 蒙 版 ” 荣 单 命令 ， 创 建 筋 贴 蒙 版 ， 把 超出 屏幕 的 壁纸 图 像 隐藏 ， 用 新 的 图 像 著 换 原来 
黑色 的 屏幕 ， 增 加 商品 的 美观 性 。 


IE 


步骤 12 绘制 图 形 并 输入 店铺 名 


经 过 前 面 的 操作 ， 完 成 了 商品 图 像 的 处 理 ， 接 下 来 需要 添加 商品 介绍 信息 。 选 择 “ 和 矩形 工具 ”， 在 图 像 底 部 绘制 一 个 矩形 
条 ， 为 了 整个 画面 色调 的 统一 ， 将 算 形 条 的 颜色 填充 为 与 手机 屏幕 相近 的 蓝 色 ， 然 后 用 “ 模 排 文字 工具 ”在 算 形 条 上 输入 文字 。 


IE 而 志和 
EL 


er 让 并 
Ea ET 


步骤 13 ”设置 “斜面 和 浮雕 ”样式 


打开 素材 文件 08.psd， 将 其 复制 到 手机 图 像 右 侧 。 为 了 让 图 形 显得 更 加 立体 ,执行 “图 层 > 图 层 样 式 > 和 斜面 和 浮雕 ”菜单 命 
令 ， 打开 “图 层 样式 ”对 话 框 ， 在 对 话 框 中 设置 样式 选项 。 


料 面 和 : 浮 崩 
结构 


方法 : | 平 明 :| 
psnms un SE 深度 [D) 了 113 |% 
三 星 Anycall 方向: 四 上 OF 


MD: 侈 素 

次 比 F SC 一 一 入 
阴影 

角度 (N): 度 


诚信 数码 旗舰 店 人 wy (G) 


步骤 14 ”应 用 样式 效果 


为 了 让 产生 的 浮 持 效果 更 目 然 ， 继 续 对 样式 选项 进行 调整 。 将 高 光 颜 色 设置 为 日 色 ，“ 不 透明 度 ” 设 置 为 50%; 阴影 颜色 设 
置 深蓝 色 ，“ 不 透明 度 ” 设 置 为 56%; 设置 完成 后 单 击 “确定 ”按钮 ， 应 用 样式 效果 。 


不 要 明度 (0): 一 [so |% 


阴影 模式 : | 正片 又 底 “| 国 国 


设置 为 默认 值 | | ”复位 为 默认 值 


步骤 15 添加 更 多 图 形 和 文字 


选择 “钢笔 工具 ”， 在 图像 右上 角 绘 制 一 个 不 规则 的 多 边 形 图 形 ， 绘 制 后 在 图 形 中 输入 商品 所 属 种 类 “电器 城 ”。 最 后 打开 
09.psd， 将 其 复制 到 画面 左上 角 ， 完 成 手机 主 图 的 设计 。 


A 多 本 
OD Hs 


实例 70 “彰显 美味 口感 的 曲 奇 饼 主 图 设计 


本 实例 是 为 某 品牌 曲 奇 饼 干 设计 的 主 图 。 在 素材 的 选择 上 ， 为 了 突出 饼干 的 美味 口感 ， 选 择 了 商品 特写 照片 ， 通 过 对 饼干 色 
泽 的 调整 ， 还 原 商 品 的 目 然 色彩 ， 获 得 顾客 的 青睐 ， 最 后 通过 在 图 像 中 添加 富有 创意 的 文字 ， 增 强 图 像 的 表现 力 。 


紊 材 随 书 资源 \ 素 材 \08\10.jpg 


源 文 件 twigst pee 


设计 分 析 


“ 设计 要 点 01: 由 于 主 图 的 尺寸 相对 较 小 ， 因 此 为 了 让 顾客 更 直观 地 看 到 实物 效果 ， 选 择 了 近 距 离 拍摄 的 饼干 图 像 作为 素 
材 。 


. 设计 要 点 02: 为 了 让 人 饼干 的 色泽 更 诱 人 ， 在 处 理 时 加 深 了 照片 中 的 红色 和 黄色 ， 并 通过 提 亮 背景 来 突出 图 像 中 的 饼干 部 


` 设计 要 点 03: 在 文字 的 处 理 上 ， 选 择 了 较 活 涛 可 爱 的 字体 ， 并 通过 在 主体 文字 劳 边 添加 动感 的 水 珠 图 形 ， 赋 了 予 了 画面 更 强 
的 设计 感 。 
版 式 分 析 


在 本 实例 的 布局 设计 中 ， 将 文字 分 别 放置 于 图 像 项 部 和 底部 ， 形 成 局 部 对 称 的 效果 ， 使 得 画面 中 间 要 突出 展示 的 商品 图 像 不 
至 于 被 文字 记 挡 ， 影 响 视 沉 效果 的 传达 。 


配色 方案 


由 于 实例 中 饼干 的 颜色 主要 为 红色 和 柳 色 ， 因 此 搭配 文字 的 时 候选 择 了 互补 的 绿色 。 男 面 中 红色 的 饼干 部 分 与 绿色 的 文字 色 
域 面积 对 比 适 当 ， 给 人 以 强烈 的 刺激 ， 画 面色 彩 效果 呈现 出 紧张 感 和 平衡 感 。 在 和 妆 饰 元 素 的 设计 中 ， 选 择 了 与 橙色 互补 的 监 色 ， 


起 到 了 很 好 的 缓冲 作用 ， 为 画面 增添 了 一 丝 清爽 感 。 
技术 要 点 


使 用 “移动 工具 把 饼干 素材 图 像 复制 到 文件 中 ， 通 过 调整 其 大 小 和 位 置 突出 要 表现 的 饼干 部 分 


:使 用 “USM 锐 化 ” 滤 镜 锐 化 图 像 ， 突 出 饼干 的 质感 。 利 用 调整 图 层 对 饼干 的 明暗 和 色彩 进行 修复 ， 让 饼干 的 色泽 更 吸引 


. 使 用 “ 横 排 文字 工具 ”在 图 像 中 输入 文字 ， 结 合 “ 字 符 ” 面 板 设置 文字 的 大 小 和 颜色 ， 突 出 文字 的 主 次 关系 ; 将 输入 的 部 
分 文字 转换 为 图 形 ， 对 其 进行 变化 设计 ， 增 强 设 计 感 。 


实例 71 早 色 风格 的 董 鞋 直 通车 图 设计 


本 实例 是 为 某 品牌 童鞋 设计 的 直通 车 图 。 在 设计 中 考虑 直通 车 图 的 尺寸 相对 较 小 ， 呈 现 的 信息 太 多 反而 会 降低 商品 的 表现 
力 ， 所 以 在 设计 时 选择 了 单 只 鞋子 来 表现 ， 通 过 把 鞋子 抠 出 并 搭配 简单 的 背景 、 文 字 修 饰 ， 使 画面 更 能 引起 顾客 的 注意 。 下 面 简 
单 介绍 设计 要 点 和 版 式 构成 等 。 


素 材 随 书 资 源 \ 素 材 \08\11.jpg 


随 书 资源 \ 源 文件 \08\ 单 色 风 格 的 童鞋 直通 


XI 车 图 设计 ,psd 


设计 分 析 


` 设计 要 点 01: 在 商品 的 表现 上 ， 为 了 让 鞋子 呈现 最 佳 的 效果 ， 对 鞋子 的 光影 、 色 彩 、 纹 理 进 行 调 整 ， 使 得 顾客 能 够 更 准确 
地 掌握 鞋子 的 整体 外 观 效果 。 


设计 要 点 02: 为 了 突出 鞋子 的 卖点 ， 在 设计 的 时 候 把 价格 、 邮 资 等 方面 的 优惠 信息 添加 到 直通 车 图 中 ， 以 最 大 限度 地 表现 
息 以 关键 词 的 方式 展示 了 出 来 。 


~ 
巨人 六 


地 看 到 店铺 所 销售 的 商品 ， 


: 圭 术 木 
/月 炬 


商品 的 优惠 力度 。 
设计 要 点 03: 鞋子 的 材质 、 质 量 是 顾客 关心 的 重点 ， 因 此 ， 在 设计 的 时 候 把 这 些 1 


版 式 分 析 
在 版 面 设计 中 末 用 了 对 称 的 编排 方式 ， 把 要 展示 的 童鞋 放 在 画面 的 视 党 中 心 位 置 ， 便 于 观 者 


再 通过 将 文字 分 别 置 于 左上 角 和 右 下 角 ， 形 成 对 称 的 画面 感 ， 突 出 商品 特点 和 价格 优势 。 


对 象 的 配色 过 程 中 ， 提 取 


导 铝 旦 
肖 景 等 


配色 方案 
在 本 实例 的 配色 设计 中 ， 为 了 让 整个 直通 车 图 的 色调 和 谐 而 统一 ， 在 确定 文字 、 修 饰 形状 、 
了 商品 照片 中 的 灰 度 色彩 来 进行 创作 。 通 过 日 色 到 灰色 的 新 变 ， 既 让 画面 有 层次 感 ， 又 让 整个 画面 色彩 更 为 协调 。 


技术 要 操 
“ 使 用 “渐变 填充 的 方式 设置 直通 车 图 背景 ， 控 制 画面 的 基调 。 
: 把 鞋子 图 像 移 到 直通 车 图 的 中 间 位 置 ， 使 用 “钢笔 工具 把 鞋子 抠 取 出 来 并 添加 图 层 蒙 版 。 


` 运用 调整 图 层 对 鞋子 的 影 调 进行 修饰 ， 最 后 在 画面 中 绘制 简单 的 几何 图 形 ， 并 在 图 形 中 输入 商品 的 促销 信息 。 


实例 72 “淡雅 风格 的 茶具 主 图 设计 


本 实例 是 为 茶具 设计 的 主 图 。 在 设计 的 时 候 ， 根 据 茶 具 的 特点 ， 将 画面 定义 为 古典 葛 味 的 中 国 风 ， 因 此 对 文字 的 处 理 选用 了 
与 画面 整体 风格 一 致 的 行书 ， 并 结合 一 些小 的 妆 饰 元 素 的 添加 ， 制 作出 频 具 吝 典 风味 的 主 图 。 下 面 简 单 分 析 画 面 的 设计 要 点 、 构 
图 特色 等 。 
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宗 材 随 书 资源 \ 素 材 \08\12.jpg、13.png 


随 书 资源 \ 源 文件 \08\ 淡 雅 风格 的 茶具 主 图 


源 文件 设计 .psd 


设计 分 析 
设计 要 点 01: 将 画面 中 多 余 的 背景 隐藏 起 来 ， 添 加 绿色 的 叶子 图 像 ， 与 茶具 上 面 的 绿色 花纹 形成 统一 的 画面 效果 。 


. 设计 要 点 02: 运用 红色 底 纹 突 出 画面 右 侧 的 “ 包 邮 二 字 ， 激 发 顾客 对 商品 的 购买 欲望 。 


` 设计 要 点 03: 用 简短 的 文字 将 商品 的 特点 传递 出 来 ， 将 其 作为 吸引 顾客 的 关键 点 ， 让 顾客 知道 更 多 与 商品 有 关 的 信息 。 


版 式 分 析 


在 此 实例 中 ， 整 个 图 像 分 为 上 、 下 两 部 分 。 上 半 部 分 主要 为 商品 的 特点 、 信 息 的 简单 介绍 ， 下 半 部 分 为 商品 效果 的 展示 ， 均 
匀 分 布 的 上 、 下 两 部 分 使 画面 显得 更 加 稳定 。 


配色 方案 


在 本 实例 中 ， 为 了 突出 条 具 的 古典 韵味 ， 在 制作 印章 图 像 时 用 了 鲜艳 的 红色 ， 将 它 与 条 具 上 的 绿色 相 搭配 ， 清 新 的 绿色 与 鲜 
艳 的 红色 形成 了 更 加 强烈 的 视 党 反差 。 这 种 对 比 配色 方式 为 画面 营造 出 强烈 的 视觉 冲击 力 ， 让 顾客 的 视 续 更 容易 为 图 像 所 吸引 。 


技术 要 操 


" 用 “ 短 形 工具 在 画面 中 绘制 图 像 ， 把 拍摄 的 茶具 照片 复制 到 短 形 上 ， 通 过 创建 剪贴 蒙 版 控制 茶具 的 显示 区 域 。 


多 种 调整 图 层 对 图 像 的 影 调 和 色彩 进行 修饰 ， 再 现 真实 的 茶具 颜色 。 


` 使 用 “ 横 排 文字 工具 ”在 空白 部 分 输入 文字 ， 最 后 绘制 印章 图 案 ， 添 加 绿叶 。 


实例 73 ”手机 癌 洗 面 奶 主 图 设计 


本 实例 是 为 菜品 牌 洗面 奶 设 计 的 手机 疹 主 图 效果 。 在 设计 过 程 中 ， 用 绚丽 的 监 色 作为 主 色 ， 并 在 育 景 中 添加 顺 溅 的 水 化 ， 让 
画面 呈现 出 更 目 然 的 动感 ， 与 画面 中 间 日 色 的 洗面 奶 形成 鲜明 的 反差， 突出 了 要 展示 的 主体 商品 。 下 面 简单 介绍 该 主 图 的 设计 要 
忌 与 布局 构成 等 。 
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率 材 随 书 资源 \ 素 材 \08\14、15.jpg 


随 书 资源 \ 源 文件 \08\ 手 机 端 洗面 奶 主 图 


六 设计 ped 


设计 分 析 


:设计 要 点 01: 在 设计 时 根据 洗面 奶 的 功效 ， 添 加 水 花 素 材 对 商品 形象 进行 烘托 ， 突 出 洗面 奶 保湿 补水 的 特点 。 


- 设计 要 点 02: 为 突出 商品 在 价格 方面 的 优势 ， 添 加 了 邮资 信息 ， 过 强烈 的 色彩 反差 突出 邮资 信息 


设计 要 点 03: 简洁 的 商品 表现 ， 通 过 把 洗面 奶 抠 出 并 对 其 色彩 进行 修饰 ， 让 商品 以 更 完美 、 精 致 的 形象 呈现 在 顾客 面前 。 


版 式 分 析 


在 本 实例 中 ， 画 面 用 商品 把 图 像 分 为 左 、 右 两 个 部 分 ， 通 过 错位 排列 的 处 理 方式 在 商品 的 两 侧 添 加 人 简 蛙 的 促销 信息 ， 使 顾客 
在 看 到 图 像 的 时 候 能 了 解 到 商品 的 最 新 促销 活动 ， 刺 激 消 费 者 的 购买 欲望 。 


配色 方案 


本 实例 中 为 了 让 画面 的 色彩 更 加 和 和谐， 在 配色 过 程 中 选择 了 清爽 的 蓝 色 作为 背景 色 ， 让 顾客 目 然 而 然 地 联想 到 使 用 商品 后 所 
市 来 的 清爽 、 和 舒适 。 同 时 ， 由 于 手机 屏幕 尺寸 有 限 ， 为 了 突出 商品 的 卖 操 ， 在 促销 信息 的 处 理 上 选择 了 红 日 搭配 ， 即 使 图 像 尺 寸 
很 小 ， 也 能 在 第 一 时 间 吸 引 顾 客 的 注意 。 


技术 要 扣 


: 把 背景 素材 复制 到 新 建 的 文件 中 ， 通 过 “变换 ”命令 调整 图 像 的 大 小 和 位 置 ， 以 适合 版 面 整 体 效果 。 


` 使 用 “钢笔 工具 把 洗面 奶 抠 取 出 来 ， 调 整 其 颜色 ， 使 商品 得 到 更 好 的 展示 。 


` 使 用 “椭圆 工具 和 “ 自 定 形状 工具 在 洗面 奶 汰 边 绘制 图 形 ， 用 “ 横 排 文字 工具 在 图 形 中 输入 相应 的 文字 。 
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黑 星 秒 西 施 稀世 泥 料 


店 招 束 是 网 店 的 店铺 招牌 ， 它 丈 好 比 一 个 店铺 的 脸面 ， 对 于 店铺 的 友 展 起 着 较为 重要 的 作用 。 因 此 在 设计 店 招 时 ， 需 要 更 多 
地 从 顾客 的 角度 去 考 碟 ， 设 计 出 来 的 店 招 要 能 够 快速 地 家 顾客 记 住 。 同 时 ， 店 招 的 设计 不 仅 需 要 具有 一 定 的 新 狭 性 ， 还 要 与 店铺 
中 销售 的 商品 风格 一 致 ， 这 样 更 利于 辨识 和 传播 。 为 了 吸引 顾客 ， 店 招 中 可 以 添加 店铺 近期 的 活动 信息 、 广 告 语 等 相 天 内 容 ， 力 
求 企 有 限 的 空间 中 传递 更 多 的 信息 。 


74 可 爱 卡 通 的 婴儿 用 品 店 店 招 设计 
75 整洁 的 茶具 店 店 招 设计 

76 ”复古 的 美 妆 店 店 招 设计 

77 ”突出 商品 定位 的 女 包 店 店 招 设计 
78” 店 招 与 导航 的 结合 设计 

79 ”粉色 唯美 风格 的 女装 店 店 招 设 计 
80 ”暗黑 炫 酷 的 美食 店 店 招 设计 


81 怀旧 色调 的 灯具 店 店 招 设计 


实例 74 ”可 爱 卡通 的 婴儿 用 品 店 店 招 设计 


本 实例 是 一 家 婴儿 用 品 店 所 设计 的 店 招 ， 图 像 中 用 了 大 量 与 婴儿 用 品 相 天 的 卡通 形象 来 表现 ， 与 店铺 所 销 商品 吻合 。 为 了 让 
整个 画面 风格 更 统一 ， 在 文字 的 处 理 上 也 用 了 活泼 的 字体 表现 ， 结 合 简单 的 图 形 修饰 ， 市 给 和 人 轻松 的 视 帝 感 受 。 


3 , i: 
= 外 se Cl, 和 SS 5 
必 是 | 局 、 
fC Jj 承载 梦想 ， 呵 护 未 来 ， 证 宝宝 健康 成 长 Nt 
全 = 5 : 素 材 随 书 资源 素材 \09\01jpg 
2 双语 随 书 资源 源 文件 \09\ 可 爱 卡通 的 婴儿 用 品 店 
二 最 *@ 0 sigit pe 


步骤 01 新建 文件 填充 颜色 


启动 Photoshop 程 序 ， 执 行 “ 文 件 > 新 建 ” 菜 单 命令 ， 打开“ 新建” 对 话 框 。 网 店 中 的 店 招 尺寸 限制 为 950 像 素 x120 像 
素 ， 但 为 了 便于 图 像 的 处 理 ， 需 要 设置 稍 大 的 尺寸 ， 因 此 在 “新 建 ” 对 话 框 中 设置 新 建文 件 尺 寸 为 1900x240， 设 置 后 单 击 “ 确 
定 ”按钮 ， 新 建 一 个 空 日 文件 。 设 置 前 景色 为 R214、G225、B229， 按 下 快捷 键 Alt+ Delete， 填 充 图 层 ， 制 作 监 色 育 景 。 


六 小 : 


宽度 (W): | 1900 | 像素 
高 度 (H): | 240 | 像素 1 


分 辩 率 (R): 72 | 像素 /英寸 


229 


颜色 模式 : | RGB 颜色 | | 8 位 _ # |d6ele5 | 


步骤 02 新 建 透明 文件 


为 了 让 背景 看 起 来 更 有 特色 ， 可 以 为 背景 填充 图 案 效果 ， 在 填充 图 案 前 可 以 先 定 义 用 于 填充 的 图 案 。 执行“ 文件 > 新 建 ” 菜 
单 命令 ， 打 开 “ 新 建 ” 对 话 框 ， 在 对 话 框 中 将 尺寸 设置 为 20 像 素 x20 像 素 ，“ 背 景 内 容 ” 设 置 为 “透明 ”， 新 建文 件 。 


名 称 (MN): | 国 点 


| | 请 室 | 
京 档 类 型 ; | 自 定 ;| | ”取消 
| 


存储 生 误 (5S)... 
宽度 [WJ): | 20 | | 硬 素 =| 了 用 
豆 度 [H): 
分 带 率 (R): | 
巩 色 独 式 :| R66 颜色 


际 福 开 


背 助 内 罕 : | 利明 


儿 
黄色 男 置 交 忻 : | sRGB jEC61366-2.1 
悍 珊 长 帘 比 :| 方形 急 素 


步骤 03 ”绘制 并 设置 选区 边界 


新 建文 件 后 ， 先 按 下 快捷 键 Ctrlt+A， 全 选 整个 画面 ， 骨 执行 “选择 > 修改 > 边界 ” 菜 蛙 命令 ,打开 “边界 选区 ”对 话 框 ,在 
对 话 框 中 设置 “宽度 ”为 1 像素 ， 为 选区 设 定 边 界 效 果 。 


宽度 (W): |1 。 | 像素 


步骤 04 ”获取 平滑 选区 


按 下 快捷 键 Shift+Ctrl+1， 反 选 选区 ， 选 择 画 面 的 中 间 部 分 。 执 行 “ 选 择 > 修 改 > 平滑 ”有 菜单 命令 ,打开 “平滑 选区 ”对 话 
框 ， 在 对 话 框 中 设置 “取样 半径 ”为 5 像素 ， 单 击 “ 确 定 ” 按 钮 ， 得 到 平滑 的 选区 。 这 里 可 以 看 到 原来 的 方形 选区 变 为 了 圆 形 选 
区 。 


取样 半径 (5): |5 像素 


| 应 用 图 布 边 弄 的 效果 


步骤 05 为 选区 填充 颜色 并 定义 为 图 案 


设置 前 景色 为 日 色 ， 按 下 快捷 键 Alt+ Delete， 将 选区 填充 为 日 色 ， 按 下 快捷 键 Ctrl+D， 取 消 选 区 ， 完 成 图 案 的 绘制 。 接 下 
来 残 要 将 绘制 的 圆 点 定义 为 新 的 图 案 。 执 行 “编辑 > 定义 图 案 ” 菜 单 合 令 ， 打 开 “ 图 案 名 称 ” 对 话 框 ， 在 对 话 框 中 将 图 案 命 名 
为 “ 圆 点 ”， 单 击 “ 确 定 ” 按 钮 ， 将 绘制 的 圆 点 定义 为 图 案 。 


步骤 06 创建 “图 案 填 元 ”图 层 填充 图 像 


前 面 已 经 定义 了 图 案 ， 接 下 来 束 可 以 应 用 定义 的 图 案 填 充 图 像 了 。 人 在 店 招 图 像 中 创建 新 的 “图 层 2” 图 层 ， 单 击 “ 图 层 ” 面 
板 底 部 的 “创建 新 的 填充 或 调整 图 层 ” 按 钮 峭 ， 在 弹出 的 列表 中 执行 “图 案 ” 命 令 , 创建 “图 案 填充 1” 图 层 ， 在 打开 的 “图 案 
填 宛 ”对 话 框 中 选择 前 面 定义 的 圆 点 图 和 案 ， 单 击 “ 确 定 ” 按 钮 ， 为 图 层 填充 图 案 效 果 。 


[x 


缩放 (5): |100 | -|% 
- 可 与 图 层 链接 (L) | 取消 | 
司 「 贴 紧 原点 (N) 、 


步骤 07 ”调整 图 层 混合 模式 


填充 图 案 后 友 现 填充 的 日 色 圆 形 显得 太 亮 了 ， 容 易 前 弱 主 体 ， 因 此 将 “图 案 填 充 1” 图 层 的 竟 合 模式 更 改 为 “ 柔 光 ”， 降 低 
加 点 背景 的 亮度 。 


1 0 0D 0/0 二 


100% Dr 


步骤 08 用 “钢笔 工具 ”绘制 云 米 


为 了 加 深 顾客 对 店铺 的 印象 ， 可 以 在 店 招 的 视 党 中 心 位 置 进行 店名 或 店铺 徽标 的 设计 。 为 了 让 店铺 名 更 吸引 人 ， 设 置 前 景色 
为 白色 ， 选 择 “钢笔 工具 ”， 在 选项 栏 中 把 绘制 模式 设置 为 “形状 ”， 然 后 在 画面 中 心 位 置 绘制 一 个 云 朱 的 图 形 。 


步骤 09 设置 “投影 ”样式 


为 了 让 绘制 的 云 洲 表现 出 立体 的 视 党 效果， 需要 为 其 添加 投影 。 双 击 “ 形 状 1” 图 层 ， 在 打开 的 “图 层 样式 ”对 话 框 中 勾 
选 “ 投 影 ” 复 选 框 ， 并 设置 好 各 项 参数 ， 单 击 “ 确 定 ” 按 钮 ， 应 用 样式 ， 完 成 投影 的 添加 。 


投影 
结构 


混合 模式 : | 正片 又 底 9 


不 透明 度 (0): 7 |% 
角度 (A): ( ! ) [50 | 度 [使 用 全 局 光 (6) 


距离 (D): 下 E 


扩展 (R): 二 
|\(5Y: | 


步骤 10 ”复制 并 调整 图 形 


为 了 让 云 洲 更 有 层次 感 ， 可 对 云 洲 进行 复制 操作 。 按 下 快捷 键 Ctrl+J， 复 制 “ 形 状 1” 图 层 ， 创 建 “ 形 状 1 拷 
按 下 快捷 键 Ctrl+T， 打 开 自 由 变换 编辑 框 ， 利 用 编辑 框 缩小 图 形 ， 缩 小 后 发 现 云 扩 不够 突出 。 选 择 “直接 选择 工 
的 云 抄 图形 ， 在 选项 栏 中 对 摘 边 选项 进行 调整 ， 为 图 形 添加 摘 边 效果 。 


国 


1 拷 风 


步骤 11 隐藏 样式 效果 


经 过 上 一 步 操 作 ， 友 现 复 制图 层 的 时 候 ， 原 图 层 中 的 “投影 ”样式 也 被 复制 了 ， 所 以 单 击 效果 前 的 “切换 所 有 图 层 效 果 可 见 
性 ”按钮 ， 隐 藏 样式 效果 。 


i 


re ”Fe 
和 形状 1 拷贝 并 i 加 形 枯 1 拷贝 


ee 


-ee 


步骤 12 ”使 用 “钢笔 工具 ” 抠 取 图 像 


为 了 让 设计 的 店 招 欧 满 鞋 趣 ， 需 要 添加 一 些 卡 通 类 的 涂饰 性 图 案 。 打 开 素 材 文件 01jpg， 复 制 “ 背 景 ”图 层 ， 使 用 “钢笔 工 
具 ” 沿 小 熊 图 像 绘 制 路 径 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 执行 “建立 选区 ”命令 ， 在 弹出 的 对 话 框 中 单 击 “ 确 定 ” 按 钮 ， 
创建 选区 ， 选 择 素材 中 的 小 能 图 像 。 按 下 快捷 键 Ctrl+J， 复 制 并 抠 出 选区 中 的 图 像 。 


步骤 13 ” 抠 取 更 多 图 像 


按照 步骤 12 中 的 方法 ， 抠 出 其 他 可 用 的 素材 图 像 ， 并 将 它们 分 别 摆 放 在 店 招 画面 中 。 对 于 大 小 不 合适 的 图 像 ， 可 以 近 快 捷 
键 Ctrl+T， 目 由 变换 图 形 ， 控 制 素材 大 小 。 


步骤 14 ”绘制 粉色 起 形 


添加 图 层 后 ， 感 吕 画 面 上 半 部 分 因 图 像 较 多 而 给 人 一 种 头 重 脚 轻 的 感 沉 。 为 了 解决 这 一 问题 ， 选 择 “ 窍 形 工具 ”， 将 前 景色 


设置 为 R254、G139、B135， 在 店 招 画 面 下 万 绘 制 一 个 粉红 色 的 息 形 。 


步骤 15 使 用 “ 模 排 文字 工具 ”添加 文字 


经 过 前 面 的 操作 ， 完 成 了 店 招 图 案 的 设计 ， 接 下 来 选择 “ 横 排 文字 工具 ”， 在 图 像 中 间 的 云 水 上 单 击 并 输入 店铺 名 “宜家 婴 


儿 用 品 店 ”。 输 入 后 打开 “字符 ”面板 ， 对 字体 和 凑 色 进行 调整 。 为 了 体现 更 活泼 的 画面 风格 ， 选 择 较 可 爱 的 汉 仪 秀 英 体 简体 ， 


并 把 颜色 统一 为 粉 蓝 


况 疏 亢 点 性 商 … 


宜家 器 儿 用 品 店 


步骤 16 创建 图 层 蒙 版 隐藏 部 分 文字 


输入 文字 后 ， 友 现 文字 显得 有 些 单调 ， 可 以 对 其 进行 创意 性 设计 。 选 择 “ 和 矩形 选 框 工 
用 ”和 “ 店 ”， 单 击 “ 图 层 ” 面 板 中 的 “添加 图 层 蒙 版 ”按钮 ， 添 加 蒙 版 ， 隐 藏 霖 选中 的 “ 品 ” 字 。 


步骤 17 绘制 图 形 修 饰 文字 


选择 “椭圆 工具 ”， 在 文字 “用 ”后 绘制 一 个 与 文字 颜色 相同 的 圆 形 。 选 择 “ 钢 笔 工具 ”， 单 击 “ 路 径 操作 ”按钮 ， 人 在 展开 


的 下 拉 列 表 中 单 击 “ 排 除 重 垩 形状” 选项， 继续 绘制 图 形 。 绘 制 后 将 图 形 复制 ， 放 置 到 不 同 的 位 置 ， 最 后 添加 广告 词 ， 完 成 店 招 
的 制作 。 


日 新 娃 图 层 
里 合并 形状 
吧 ) 减 去 山 层 形状 


实例 75 “整洁 的 茶具 店 店 招 设计 


本 实例 是 茶具 用 品 店 设计 的 店 招 ， 在 设计 时 将 商品 的 图 像 放 置 在 画面 的 右 侧 ， 搭 配 清爽 风格 的 背景 ， 利 用 完整 的 图 片 显 示 来 
吸引 顾客 的 注意 。 画 面 元 侧 通过 文字 的 大 小 变化 表现 更 有 层次 天 系 的 画面 。 


NE BS py z 
S、 十 洋洋 家 居 官 方 旗舰 店 


依 关注 吉 洋 洋 车 陶 


黑 星 砂 西 施 稀世 泥 料 


藏 
x 


随 书 资源 \ 素 材 \09\02.jpg 一 05.jpg 


随 书 资源 \ 源 文件 \09\ 整 洁 的 茶具 店 店 招 
设计 .psd 


步骤 01 填充 浅 色 背景 


启动 Photoshop 程 序 ， 执 行 “ 文 件 > 新 建 ” 菜 单 命令 ， 新 建文 件 。 由 于 实例 需要 表现 整洁 的 画面 效果 ， 所 以 将 前 景色 设置 为 
R241、G240、B219， 新 建 “ 图 层 1” 图 层 ， 按 下 快捷 键 Alt+ Delete， 将 背景 填 有 苑 为 较 清 爽 的 颜色 。 


fifodb 


步骤 02 ”复制 图 像 调整 大 小 


为 了 让 简单 的 背景 显得 更 加 精致， 选择 “移动 工具 ”， 把 素材 文件 02.jpg 复 制 到 店 招 图 像 的 左上 角 位 置 ， 得 到 “图 层 2” 
层 。 按 下 快捷 键 Ctrl+T， 打 开 上 自由 变换 编辑 框 ， 调 整编 辑 框 中 的 叶子 大 小 ， 平 衡 画 面 布 局 。 


~ 


步骤 03 ”使 用 “画笔 工具 ”编辑 图 层 蒙 版 


添加 叶子 后 ， 为 了 让 叶子 融入 到 育 景 中 ， 需 要 将 部 分 叶子 隐藏 起 来 。 单 击 “ 图 层 ”面板 中 的 “添加 图 层 蒙 版 ”按钮 ， 为 “图 


层 2” 图 层 添加 图 层 共 版 。 选 择 “画笔 工具 ”， 设 置 前 景色 为 黑色 ， 降 低 不 透明 硫 后 ， 在 叶子 边 绿 涂抹 ， 隐 藏 图 像 。 


模式 : 正 利 不 和 明度 : 21% 医 


a 


步骤 04 ”复制 画面 中 的 叶子 图 像 


如 果 画 面 中 只 有 一 组 叶子 ， 未 免 显得 有 些 单调 ， 因 此 复制 一 组 叶子 图 像 。 按 下 快捷 键 Ctrl+J， 复 制图 层 ， 得 到 “图 层 2 拷 
贝 ”图 层 ， 将 复制 的 叶子 向 右 拖 蝶 人 双 店 招 中 间 位 置 。 单 击 “ 图 层 2 拷 由 ”图 层 蒙 版 ， 运 用 画笔 工具 调整 叶子 的 显示 汽 围 。 


步骤 05 复制 图 像 添 加 图 层 蒙 版 


打开 素材 文件 03,jpg， 将 图 像 复 制 到 两 组 叶子 的 中 辐 位 置 ， 得 到 “图 层 3” 图 层 。 为 了 让 化 沙 与 整个 画面 融 为 一 体 ， 单 
击 “ 图 层 ”面板 中 的 “添加 图 层 蒙 版 ”按钮 辐 ， 添 加 图 层 蒙 版 。 选 择 “画笔 工具 ”， 设 置 前 景色 为 黑色 ， 涂 抹 菊 花 图 像 ， 将 颜 
色 较 深 的 背景 隐藏 ， 保 留 部 分 化 水 图 像 。 


) =- 图 层 2 拷 见 


步骤 06 更 改 图 层 不 透明 度 


添加 人 花 米 后 ， 友 现 花 米 偏 亮 。 选 择 “ 图 层 3” 图 层 ， 将 此 图 层 的 “不 透明 度 ” 设 置 为 66%， 降 低 不 透明 度 ， 这 样 画 面 的 层次 
天 系 更 加 突出 了 。 


正常 < ”不 j 委 明度 : 66% 
谈 定 : 转 sf 中 自 。” 填充 : 100% 


步骤 07” 用 “画笔 工具 ”编辑 图 层 共 版 


完成 店 招 背 景 的 设计 后 ， 接 下 来 束 可 以 在 画面 中 添加 店铺 中 销售 的 商品 了 。 打 开 素 材 文 件 04.jpg， 选 择 “ 移 动工 具 ”， 把 打 
开 的 图 像 拖 至 店 招 右 侧 。 添 加 图 层 蒙 版 ， 选 择 “ 男 笔 工 具 ”， 单 击 “ 贺 笔 预 设 ” 选 取 器 中 的 “ 硬 边 加 ”画笔 ， 在 欠 具 旁边 的 灰 日 
色 背 景 处 单 击 ， 隐 藏 育 景 图 像 。 


步骤 08 载 入 选区 调整 “亮度 /对 比 度 ” 


为 了 让 店 招 中 的 商品 更 吸引 人 ， 可 以 对 商品 的 色泽 进行 修饰 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 4” 图 层 蒙 版 ， 载 入 选区 。 新 
建 “ 亮 度 / 对 比 度 1” 调 整 图 层 ， 打 开 “ 属 性 ”面板 ， 同 右 拖 忠 “亮度 ”和 “对 比 度 ” 滑 块 ， 提 亮 图 像 并 增强 对 比 。 此 时 可 看 到 选 
区 中 的 茶具 颜色 变 得 更 鲜艳 了 。 


步骤 09 设置“ 亮度/ 对比度” 调整 图 像 


使 用 与 步骤 07 相 同 的 方法 ， 打 开 另 一 个 从 具 素材 05.jpg， 将 其 复制 到 店 招 文件 中 。 添 加 图 层 蒙 版 ， 隐 藏 背景 ， 表 创建 “ 亮 
度 / 对 比 度 2” 调 整 图 层 , 调整 图 像 的 亮度 和 和 对比度， 得 到 更 靓丽 的 从 具 效 果 。 


步骤 10 设置 “高 斯 模糊 ” 渡 镜 模糊 图 像 


添加 茶具 后 ， 图 像 是 “ 浮 ” 在 背景 中 的 ， 所 以 为 了 解决 这 一 问题 ， 可 以 为 茶具 添加 投影 效果 。 选 择 “ 椭 圆 工 具 ”， 在 共 具 下 
方 单 击 并 拖 岛 昭 标 ， 绘 制 一 个 浓 灰 色 的 椭圆 图 形 。 执 行 “ 滤 镜 > 模 糊 > 高 斯 模糊 ”有 菜单 命令 ,打开 “高 斯 模糊 ”对 话 框 ， 在 对 话 
框 中 设置 选项 ， 模 糊 图 像 。 


QQ 10% 入 
半径 (R): |3 ”| 像素 


FT 


步骤 11 复制 投影 图 层 


设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 返 回 图 像 窗口 ， 查 看 模糊 后 的 图 像 效 果 。 如 果 一 个 茶具 有 投影 而 另 一 个 没有 ， 那 么 画面 肯定 
会 很 不 协调 ， 所 以 按 下 快捷 键 Ctrl+J， 复 制 投影 图 层 ， 然 后 用 “移动 工具 ”把 复制 的 投影 移 到 另 一 个 茶具 图 像 下 。 


O | 是 - 图 层 5 
OD em 图 层 6 拷 风 


反 巧 提示 : 使 用 万 同 键 调整 图 像 位 置 


Photoshop 中 要 移动 图 像 的 位 置 ， 除 了 可 以 使 用 “移动 工具 ”外 ， 也 可 以 通过 键盘 中 的 上 、 下 、 左 、 右 方向 键 微调 图 像 位 
置 。 


步骤 12 使 用 “ 横 排 文字 工具 ”输入 店铺 名 


仅 在 店 招 图 像 中 添加 商品 还 远 远 不 够 ， 为 了 使 画面 更 完整 ， 还 需要 加 入 店铺 名 称 、 关 注 信息 及 商品 简介 等 。 选 择 “ 横 排 文 字 
工具 ， 打 开 “ 字 竺 ”面板 ， 在 面板 中 设置 字体 为 较 工整 的 黑体 ， 调 整 大 小 后 在 画面 元 侧 输 入 店铺 名 “ 言 洋洋 家 居 官 方 旗舰 
店 ”， 以 便 顾 客 一 眼 束 能 看 到 店名 。 
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步骤 13 ”继续 输入 更 多 文字 


使 用 “ 横 排 文字 工具 ”在 已 输入 的 文字 下 方 单 击 并 输入 店铺 的 天 文 名 称 ， 输 入 后 打开 “字符 ”面板 ,调整 天 文 的 大 小 ， 突 出 
层次 天 系 。 


里 体 Regular 


了 lim 
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步骤 14 使用“ 圆 角 算 形 工具 ”绘制 图 形 


现在 很 多 店铺 的 店 招 上 都 会 有 关注 图 标 ， 这 里 也 为 店铺 添加 关注 图 标 。 为 了 突出 关注 信息 ， 设 置 前 景色 为 R202、G33、 
B76， 选 择 “ 圆 角 粉 形 工 具 ”， 人 在 选项 栏 中 设置 绘制 模式 为 “形状 ”， “半径 ”为 20 像 素 ， 在 店铺 名 下 绘制 较 圆 润 的 矩形 效果 。 


半径 : 20 像 世 3 加 


jl YANGYANG HOME OFF ICIAL FLAGSHIP STORE 


步骤 15 ”使 用 “ 目 定 形状 工具 ”绘制 心 形 


将 前 景色 更 改 为 日 色 ， 选 择 “ 目 定形 状 工具 ”， 单 击 “ 形 状 ” 石 侧 的 下 拉 按 钮 ， 在 展开 的 “形状 ” 拾 色 器 中 单 击 “ 心 形 ” 
在 红色 的 圆 角 息 形 元 边 绘制 一 个 心 形 图 案 。 


言 症 ; 手 家 居 官 万 旗舰 让 


1 YANGYANG HOME OFFICIAL FLAGSHIP STORE 


步骤 16 ”添加 更 多 图 形 和 文字 


选择 “ 横 排 文字 工具 ”， 打 开 “ 字 符 ” 面 板 ， 在 面板 中 调整 文字 的 字体 、 大 小 、 颜 色 等 属性 ， 在 矩形 图 案 中 输入 关注 信息 。 
使 用 同样 的 方法 在 店 招 中 添加 更 多 的 图 形 和 文字 ， 完 成 店 招 的 制作 。 
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实例 76 ” 复 训 的 美 妆 店 店 招 设计 


本 实例 是 一 家 美 妆 店 所 设计 的 店 招 ， 男 面 在 设计 时 及 用 了 较为 尝 凑 的 布局 方式 ， 将 店铺 中 的 主要 商品 、 最 新 活动 动态 、 店 铺 
名 称 等 大 量 信息 通过 不 同 颜 色 、 大 小 的 文字 表现 出 来 ， 同 时 为 了 缓解 大 量 文字 所 引起 的 视 完 疲 芳 ， 在 画面 两 侧 添 加 了 模特 及 商品 
图 像 ， 形 成 和 谐 对 称 的 版 面 效 果 。 


pe a , 葡 精 华 护肤 人 
烤 新 恒 / 初秋 如 白 肌肤 


精准 调配 +1% 
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素 ” 材 随 书 资源 素材 09\06、07、09.jpg，08.psd 
源 文件 ”” 随 书 资源 源 文件 \09\ 复 古 的 美 妆 店 店 招 设计 .psd 


步骤 01 新 建文 件 填充 颜色 


启动 Photoshop 程 序 ， 执 行 “文件 > 新 建 ” 菜 单 命 令 ， 打 开 “ 新 建 ” 对 话 框 。 为 了 方便 对 图 像 进 行 编辑 ， 在 对 话 框 中 将 图 像 
尺寸 设置 为 1400 像 素 x221 像 素 ， 单 击 “ 确 定 ” 按 钮 ， 新 建文 件 。 本 实例 需要 表现 复古 风格 ， 因 此 设置 前 景色 为 R211、G191、 
B154， 设 置 后 将 背景 填充 为 设置 的 前 景色 。 


分 状 率 (R): 
颜色 模式 ， 


步骤 02 复制 图 像 


打开 素材 文件 06.jpg， 将 打开 的 照片 复制 到 新 建 的 店 招 图 像 上 ， 得 到 “图 层 2” 图 层 。 为 了 便于 后 面 对 图 像 进行 调整 ， 执 
行 “图 层 > 智能 对 象 > 转 损 为 智能 对 象 ”菜单 售 令 ， 将 “图 层 2” 图 层 转 换 为 智能 对 象 图 层 。 


将 模特 照片 移动 到 店 招 左 侧 ， 然 后 创建 “ 黑 晶 1” 调整 图 层 ， 打开“ 属性 ”面板 ， 单 击 “ 上 自动 ”按钮 ， 并 勾 选 “色调 ” 复 选 
框 ， 对 照片 进行 着 色 ， 统 一 画面 的 颜色 。 


步骤 04 调整“ 色 阶 ” 提 亮 高 光 部 分 


为 了 让 模特 的 肌肤 更 有 光泽 ， 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 2” 图 层 缩 响 图 ， 载 入 选区 。 新 建 “ 色 阶 1” 调 整 图 层 ， 设 置 色 阶 
选项 ， 增 强 对 比 效果 。 


= 


输出 色 阶 : 0 


步骤 05 ”使 用 “ 目 形 工具 ”绘制 图 形 


为 了 加 深 顾 客 对 品牌 的 印象 ， 需 要 在 店 招 中 添加 品牌 徽标 。 选 择 “ 息 形 工 具 ”， 在 需要 添加 品牌 徽标 的 位 置 单 击 并 拖 暇 鼠 
标 ， 绘 制 一 个 与 背景 颜色 反 磊 较 明 显 的 算 形 。 


步骤 06 选择“ 横 排 文字 工具 ”输入 品牌 名 称 


选择 “ 横 排 文字 工具 ”， 在 紫色 的 和 矩形 上 单 击 并 输入 品牌 名 称 “Jiaoyan”。 输 入 后 打开 “字符 ”面板 ， 吸 取 背 景 中 的 头 色 
作为 文字 颜色 ， 统 一 画面 颜色 。 


万 正太 标 末 阐 .… 
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步骤 07 使 用 “ 目 定 形状 工具 ”绘制 潍 饰 图 案 


将 前 景色 设置 为 与 品牌 名 称 相同 的 颜色 R252、G233、B194， 选 择 “ 自 定形 状 工具 ”， 在 选项 栏 中 设置 绘制 模式 为 “ 形 
状 ”， 单 击 “ 形 状 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 “形状 ” 拾 色 器 中 单 击 “ 人 花形 丢 饰 3 ”形状 ， 然 后 在 文字 上 单 击 并 拖 折 鼠 标 ， 绘 


制 化 水 图案， 组 合 为 标志 图 案 。 


这 型 大 
开 到 二 : PP -> 直下 力 经 
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步骤 08 运用 “ 横 排 文字 工具 ”输入 更 多 文字 


使 用 “ 横 排 文字 工具 ”在 已 绘制 的 标志 图 像 下 输入 更 多 的 文字 和 品牌 广告 语 。 为 了 让 文字 的 主 次 关系 更 清晰 ， 输 入 后 适当 调 
整 文字 的 大 小 和 字体 。 


精准 调配 +1% 
Precise deployment of +1% 


步骤 09 ”继续 输入 文字 


为 了 表现 更 崇 凑 的 画面 效果 ， 结 合 “ 横 排 文字 工具 ”和 和 “字符” 面板， 在 店 招 右 侧 的 留 日 区 域 输入 更 多 的 品牌 介绍 及 促销 信 


el 


帮 脾 河 动 ”关注 掌柜 说 。 收藏 本 店 
河南 《我 是 美人 》 官 方 合作 品牌 
0 娇 颜 .官方 旗舰 店 


ALL ERUDUCTS T AEE 补 本 锁 量 NNO.1 


首页 惊喜 ”所 有 产品 热 销 套 组 。 ”镇 店 冰 腊 > My | | 里 骨 
-BM LOGO 


步骤 10 ”选择 “钢笔 工具 ”绘制 图 形 


前 景色 为 R77、G53、B51,， 绘 制 模 式 为 “形状 ”， 在 


0 


输入 文字 后 ， 还 需要 突出 一 部 分 主体 文子 。 选 择 “ 钢 笔 工具 ”， 
文字 “肌肤 美 ”下 方 连续 单 击 ， 绘 制 四 边 形 效果 。 


步骤 11 复制 图 形 调整 外 形 轮 万 


按 下 快捷 键 Ctrl+J， 复 制图 形 ， 得 到 “形状 2 拷贝 ”图 层 。 选 择 工具 箱 中 的 “直接 选择 工具 ”， 选 中 路 径 销 点 ， 调 整 销 点 的 
位 置 ， 更 改 图 形 大 小 ， 将 其 置 于 文字 “ 走 进 娇 颜 美 妆 ”下 方 。 


dene et 


步骤 12 ”使 用 “ 目 定 形状 工具 ”绘制 委 饰 图 形 


为 了 提高 美 妆 商品 的 档次 ， 选 择 “ 目 定形 状 工 具 ”， 设 置 绘制 模式 为 “形状 ”， 单 击 “ 形 状 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 下 
拉 列 表 中 单 击 “ 旦 冠 1” 形 状 ， 在 文字 “我 ” 左 侧 绘制 一 个 漂亮 的 星 冠 图 案 。 


于 - 


步骤 13 ”使 用 “直线 工具 ”绘制 线条 


选择 “直线 工具 ”， 人 在 选项 栏 中 设置 绘制 模式 为 “形状 ”，“ 粗 细 ” 为 2 像素 ， 在 画面 中 时 击 并 拖 忠 女 标 ， 绘 制 一 条 直线 。 


对 下] 功 经 


》 官 方 合作 品牌 


步骤 14 调整 图 层 蒙 版 设置 新 隐 效 果 


为 了 让 绘制 的 直 绪 呈现 目 然 的 过 渡 效 果 ， 单 击 “ 形 状 4” 图 层 ， 添 加 图 层 蒙 版 。 选 择 “ 渐 变 工具 ”， 人 在 选项 栏 中 选择 “ 黑 ， 
日 渐变 ”， 单 击 “ 对 称 渐变 ”按钮 ， 从 直线 中 辐 位 置 向 下 拖 擅 渐 要 ， 得 到 渐 隐 的 线条 效果 。 


人 》 官 方 合作 品牌 
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授 巧 提示 : 反 向 渐变 


用 “渐变 工具 ”编辑 图 像 时 ， 勾 选 选 项 栏 中 的 “ 反 向 ” 复 选 框 ， 可 以 将 设置 的 渐变 颜色 进行 翻转 。 


步 又 15 使 用 “椭圆 工具 ”绘制 圆 形 
“ 顶 圆 工具 ”， 在 选项 栏 中 设置 绘制 模式 为 “形状 ”， 按 住 shift 键 不 放 ， 单 击 并 


将 前 景色 设置 为 R101、G77、B74， 选 择 
左 侧 绘 制 一 个 小 的 正 圆 图 形 。 


拖 蝶 鼠标 ， 在 文字 “首页 惊喜 
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步骤 16 复制 图 形 更 改 颜色 
移动 工具 ”， 调 整 小 圆 的 位 置 ， 得 到 并 排 的 图 形 效果 。 为 了 突出 部 


连续 按 下 3 次 快捷 键 Ctrl+J， 复 制 小 圆 图 形 ， 然 后 选择 
分 信息 ， 可 以 对 小 圆 的 颜色 进行 调整 。 这 里 为 了 突出 “ 热 销 套 组 ” ， 将 第 三 个 小 圆 的 颜色 更 改 为 R89、G96、B115。 
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步骤 17 使用“ 自 定形 状 工 具 ” 绘 制 叶子 


选择 “ 目 定 形状 工具 ”， 设 置 绘制 模式 为 “形状 ”， 单 击 “ 形 状 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 下 拉 列 表 中 单 击 如 图 所 示 的 形 


状 ， 然 后 在 第 一 个 小 圆 中 间 绘 制 出 图 案 。 


INDEX 


步 又 18 继续 绘制 更 多 图 形 


继续 使 用 同样 的 方法 ， 在 另外 3 个 小 圆 中 间 也 绘制 出 相应 的 图 案 ， 得 到 更 加 丰富 的 画面 效果 。 
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步骤 19 ”使 用 “钢笔 工具 ” 抠 取 图 像 


为 了 突出 店铺 的 商品 定位 ， 可 以 在 店 招 上 添加 商品 。 打 开 素 材 文件 07jpg， 选 择 “ 钢 笔 工 具 ”， 治 商品 图 像 绘制 工作 路 径 ， 


绘制 后 按 下 Ctrl+Enter 键 ， 将 路 径 转 换 为 选区 


步骤 20 ”调整 并 复制 选区 内 的 商品 


此 时 可 以 看 到 已 经 选择 了 男 面 中 的 商品 对 销 ， 为 了 让 抠 出 的 商品 边缘 更 干净 ， 执 行 “ 选 择 > 修 改 > 收缩 ”菜单 命令 ， 打 
开 “ 收 缩 选 区 ”对 话 框 ,设置 “收缩 量 ” 为 1 像素 ， 收 缩 选 区 ， 然 后 把 选区 中 的 商品 复制 到 店 招 文件 右 侧 。 
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L_ 应 用 图 布 边界 的 效果 


步骤 21 使 用 “曲线 ”和 “ 色 阶 ”调整 影 调 


添加 商品 后 友 现 商品 太 暗 了 ， 显 得 很 胜 ， 所 以 需要 对 其 明暗 和 颜色 进行 修饰 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 3” 图 层 ， 载 入 
选区 。 新 建 “ 曲 线 1” 调 整 图 层 ， 蛙 击 并 向 上 拖 蝶 曲线 ， 提 亮 图 像 。 创 建 “ 色 阶 1” 调 整 图 层 ， 同 右 拖 蝶 灰色 交 块 ， 同 左 拖 蝶 日 
色 滑 块 ， 提 高 中 间 调 和 高 光 部 分 的 亮度 。 
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步骤 22 设置 “可 选 颜 色 ” 修 饰 颜色 


为 了 让 画面 中 的 色调 更 统一 ， 再 次 载 入 化 妆 品 选区 。 新 建 “ 选 取 颜 色 1” 调 整 图 层 ， 打开 “属性 ”面板 ， 在 面板 中 选择 “ 
色 ” 选 项 ， 设 置 颜色 百分比 ， 让 化 妆 品 颜色 显得 更 加 柔美 。 


王 侍 


步骤 23 复制 图 形 添加 “内 发 光 ” 样 式 


打开 素材 文件 08.psd， 将 打开 的 图 像 复制 到 化 妆 品 图 像 下 方 ， 得 到 “图 层 4” 图 层 ， 观 察 图 像 友 现 化 


米 边 绿 为 日 色 ， 


显得 太 


需要 对 色调 进行 调整 。 执 行 “ 图 层 > 图 层 样式 > 内 友 苑 ”菜单 命令 ,打开 “图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 多 选 “内 友 


光 ” 复 选 框 , 设置 内 友 光 样式 .。 


\ S 内 发 光 

关注 掌柜 说 | 收藏 本 店 结构 
混合 模式 : | 颜色 加 深 
ee] 不 重 明 度 (0): 
有 杂 色 (N): 局 


Re Ps | 
1 . 1 
[ 吗 | | 

t a % pF 

和 We a 


图 素 


方法 : | 条 和 :| 
得 :0 ) 居中 (E) 
阳 梧 (0): 人 5 
大 小 (5): 


步骤 24 ”复制 花灯 图 像 


设置 后 可 以 看 到 化 抄 的 边 绿 也 显示 为 了 栖 色 ， 按 下 快捷 键 Ctrl+J， 复 制 两 个 伦 抄 图像。 选择 
像 移 至 其 他 商品 的 位 置 ， 得 到 重 赦 的 化 水 效果 。 


) 志和 (G) 


“移动 工具 ” 


,将 


六 


掌柜 说 | 收藏 本 店 柜 说 | 收藏 本 店 


步骤 25 ”添加 文字 补充 信息 


选择 “ 横 排 文字 工具 ”， 在 商品 图 像 入 边 输入 商品 主要 成 分 、 功 效 等 信息 。 输 入 后 使 用 “钢笔 工具 ”人 在 文字 下 万 绘制 不 同 郑 


色 的 图 形 ， 突 出 这 些 文字 。 


步骤 26 ”应 用 “USM 锐 化 ” 滤 镜 锐 化 图 像 


本 实例 设计 的 店 招 为 复古 风格 ,为 了 增强 复古 的 氛围 ， 打 开 素 材 文 件 09.jpg， 将 图 像 复制 到 店 招 图 像 。 执 行 “ 滤 镜 > 锐 化 


>USM 锐 化 ”菜单 命令 ， 锐 化 图 像 ， 得 到 更 清晰 的 图 像 效 果 。 


步骤 27 ”重复 应 用 滤 镜 馈 化 图 像 


为 了 得 到 更 清晰 的 纹理 效果 ， 按 下 快捷 键 Ctrl+F， 对 图 像 再 次 应 用 “USM 锐 化 ” 滤 镜 ， 锐 化 图 像 。 


恒 | 
OO 粳 : E me Li 


一 丰 


步骤 28 执行 “去 色 ” 命 令 转换 为 黑 日 效果 


为 了 让 纹理 颜色 更 干净 ， 可 以 执行 “图 像 > 调 整 > 去 色 ” 菜 单 命令 ,去 除 图 像 颜色 ， 将 其 转换 为 黑 日 效果 ， 表 按 下 快捷 键 
Ctrl+T， 调 整 纹理 图 像 的 大 小 。 


步骤 29 ”更 改 图 层 混合 模式 


为 了 让 添加 的 纹理 与 背景 图 像 拼 合 起 来 ， 需 要 调整 图 层 混 合 模式 。 选 择 “ 图 层 ?” 图 层 ， 将 此 图 层 的 混合 模式 更 改 为 “和 柔 


= 和 , - A - a ep 
泽 甘 区 精 华 护 肤 套 甘 * 信人 大 本 
不 委 明 度 : 100% 


团 。 直 四 填充 : 100% 
mm 


技 15 提 示 : 调整 并 查看 混合 模式 


用 图 层 混 合 模 式 编辑 图 像 时 ， 可 以 通过 键盘 中 的 上 、 下 、 左 、 右 方向 键 快 速 地 在 不 同 的 混合 模式 之 间 切 换 。 


步骤 30 ”使 用 “画笔 工具 ”涂抹 图 像 


过 上 一 步 操作 ， 时 然 在 图 像 上 添加 了 更 加 复古 的 纹理 效果 ， 但 是 也 因为 二 加 至 模特 图 像 上 的 纹理 ， 使 模特 的 肌肤 变 得 不 
兆 了 。 因 此 为 “图 层 5” 添 加 图 层 蒙 版 ， 选 择 “ 画 笔 工具 ”， 将 前 景色 设置 为 黑色 ，“ 不 透明 度 ” 调 整 为 21%， 在 人 物 图 像 上 涂 
抹 ， 隐 藏 纹理 . 


步骤 31 编辑 图 层 蒙 版 


接 下 来 再 看 右 侧 ， 友 现 商 品 也 被 二 加 上 了 纹理 。 单 击 “ 图 层 5” 图 层 蒙 乒 ,设置 前 景色 为 黑色 ， 按 下 快捷 键 Alt+ Delete， 将 
图 层 蒙 版 填充 为 黑色 ， 隐 藏 商品 上 的 纹理 。 


实例 77 ”突出 商品 定位 的 女 包 店 店 招 设计 


本 实例 是 为 女 包 店 设计 的 店 招 页 面 ， 在 设计 时 通过 把 店铺 中 所 销售 的 商品 放置 于 画面 中 间 位 置 ， 突 出 店铺 的 商品 定位 ， 顾 客 
一 眼 融 知道 该 店铺 所 售 商品 的 特点 、 价 格 等 重要 信息 ， 同 时 在 画面 的 左 侧 以 醒目 的 颜色 展示 店铺 名 和 店铺 广告 语 ， 加 深 了 顾客 对 
店铺 的 印象 。 


流泪 5 


WDMEN S HANDBAGS 


收藏 店铺 


BOOK MARK___ | 


六 关注 


和 


束 材 随 书 资源 \ 素 材 \09\10.jpg 一 14.jpg，15.psd 


随 书 资源 \ 源 文件 ,09\ 突 出 商品 定位 的 女 包 店 
源 文 件 。。 店 招 设计 .psd 


步骤 01 复制 背景 图 像 


启动 Photoshop 程 序 ， 新 建 一 个 文件 。 打 开 素 材 文件 10.jpg， 将 素材 复制 到 新 建 的 文件 中 。 单 击 “ 图 层 ” 面 板 中 的 “添加 
图 层 蒙 版 ”按钮 ， 为 “图 层 1” 添 加 图 层 蒙 版 ， 用 黑色 画笔 轻微 涂抹 最 右 侧 的 图 像 ， 隐 藏 图 像 效 果 。 


步骤 02 ”选择 并 调整 “可 选 颜色 " 


为 了 让 背景 呈现 更 丰富 的 颜色 效果 ， 选 择 “ 套 索 工 具 ”， 在 店 招 中 间 位 置 单 击 并 拖 蝶 鼠标 ， 绘 制 一 个 柔和 的 选区 。 新 建 “ 选 
取 闸 色 1” 调 整 图 层 ,， 打开“ 属性 ”面板 ， 在 面板 中 选择 “中 性 色 ”， 然 后 调整 颜色 百分比 ， 将 选区 颜色 调整 为 淡 紫 色 效 果 。 


-四 曲 门 同 羽 K: so 像素 


步骤 03 更改 图 层 混合 模式 


调整 颜色 后 ， 为 了 让 背景 显得 更 加 精致 ， 可 以 添加 一 些 委 饰 元 素 。 打 开 素 材 文 件 11jpg， 将 素材 复制 到 画面 中 ， 得 到 “图 层 
2” 图 层 ， 此 时 会 友 现 天 空中 的 云层 大 抢眼 ， 画 面 看 起 来 大乱。 将 图 层 混合 模式 更 改 为 “明度 ”， “不 透明 度 ” 降 为 30%。 


不 透明度 : 30% 


谈 定 : 图 sf 中 日 填充: 100% 


DD ee 图 甘 2 


步骤 04 调整 “亮度 /对 比 度 ' 


经 过 上 一 步 操作 ， 背 景 变 得 更 丰富 了 ， 但 是 感 沈 不 够 唯美 ,与 要 表现 的 商品 风格 不 是 很 协调 。 所 以 创建 “亮度 /对 比 度 1” 调 
整 图 层 ， 打 开 “ 属 性 ”面板 ,调整 选项 ， 提 亮 图 像 ， 加 强 对 比 效果 。 


步骤 05 ”使 用 “起 形 工具 ”绘制 渐变 起 形 
在 画面 中 进行 店铺 徽标 的 添加 ， 新 建 徽标 图 层 组 ， 选 择 “和 窍 形 工 具 ”， 设 置 绘制 模式 为 “形状 ”， 并 调整 填充 颜色 ， 在 店 招 
图 像 左 侧 单 击 并 拖 蝶 鼠标 ， 绘 制 新 变 算 形 。 


a 2 本 


J 


m 


> ke LOGO 


攻 直 :100 国生 允 与 图 导 对齐 
已 夏目 一 高 度 / 对 比 度 1 


步骤 06 运用 “ 横 排 文 字 工 具 ” 输 入 店铺 名 
选择 “ 横 排 文字 工具 ”， 在 算 形 中 间 单 击 并 输入 女 包 品牌 “微微 女 包 ”。 输 入 后 打开 “字符 ”面板 ， 调 整 文字 的 字体 、 大 小 
及 颜色 ， 突 出 品牌 信息 。 
况 羽 相 育 体 类 ,,… 
TI 100 点 
VA o 
而: 0% 


1 100% 
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步骤 07 ”选择 并 调整 文字 大 小 


为 了 突出 文字 的 主 次 关系 ， 可 以 对 局 部 文字 的 字号 进行 调整 。 实 例 中 女 包 品牌 为 “微微 ”， 而 “ 文 包 ” 二 字 只 是 为 了 补充 其 
种 类 ， 所 以 选择 “ 女 包 ”二 字 ， 将 其 字号 缩小 全 250 点 。 


50 点 国 夫 6 点 
ae VAD VA 


二 贡 [E 


继续 使 用 “ 横 排 文字 工具 ”在 矩形 中 间 输 入 更 多 的 文字 ， 输 入 后 根据 要 表现 的 信息 调整 文字 的 大 小 、 字 体 及 颜色 等 。 


步骤 08 ”添加 更 多 店铺 徽标 信息 


WOMEN'S HAND 
微微 在 身边 微笑 宪 


WOMEN'S HANDBAGS 
-一 欧 殴 在 身边 微笑 在 身边 一 


技 了 15 提示: 快速 反选 选区 


图 像 中 创建 选区 后 ， 如 果 要 对 选区 进行 反选 操作 ， 则 可 以 执行 “选择 > 反选 ”菜单 命令 ， 也 可 以 按 下 快捷 键 Shift+Ctt+I， 快 
速 反选 图 像 。 


步骤 09 ”复制 包 包 图 像 


经 过 前 面 的 操作 ， 完 成 了 店铺 徽标 的 制作 。 为 了 突出 店铺 商品 的 定位 ， 还 需要 添加 包 包 商品 图 片 。 打 开 素 材 文件 12.jpg.、 
13jpg， 将 照 厂 拖 蝶 至 店 招 图 像 上 ， 并 将 其 调整 至 合适 大 小 。 


ss 


OME 有 > HANDBAGS 


步骤 10 ”使 用 “ 魔 棒 工 具 ” 选 择 图 像 


添加 包 包 图 像 后 ， 还 需要 把 原 手提 包 旁 边 的 背景 去 挥 ， 由 于 手提 包 背 景 颜色 与 包 包 颜色 区 别 较 大 ， 因 此 可 以 使 用 “ 魔 棒 工 
具 ” 来 选择 。 单 击 “ 魔 棒 工具 ”按钮 表单 击 选项 栏 中 的 “添加 到 选区 ”按钮 ， 连 续 在 手提 人 包 旁 边 的 背景 处 单 击 ， 选 择 整个 背景 
图 像 ， 执 行 “选择 > 反选 ”有 菜 蛙 命令， 反选 选区 。 


参 


步骤 11 设置 “亮度 /对 比 度 ' 


单 击 “ 图 层 ”面板 中 的 “添加 图 层 蒙 版 ”按钮 四 ， 添 加 图 层 蒙 版 ， 隐 藏 乡 余 的 背景 。 观 察 图 像 发 现 包 包 图 像 偏 暗 ， 导 臻 其 
色彩 显得 不 够 吸引 人 。 载 入 手提 包 先 区， 新建“ 亮度 /对 比 度 2” 调 整 图 层 ， 打 开 “ 属 性 ”面板 ， 调 整 选项 ， 提 高 图 像 的 亮度 和 对 
比 度 ， 使 手提 包 颜 色 变 得 更 加 鲜艳 。 


步骤 12 调整 男 一 个 手提 包 


继续 使 用 相同 的 万 法 ， 对 另 一 个 手提 包 图 像 进 行 处 理 ， 隐 藏 多 余 的 背景 ， 并 对 图 像 的 亮度 进行 调整 ， 得 到 更 为 干净 的 画面 效 
宋 。 


步骤 13 ”使 用 “椭圆 工具 ”绘制 红色 小 圆 


为 了 吸引 顾客 的 注意 ， 还 需要 在 手提 包 旁 边 添加 促销 信息 。 选 择 “ 椭 圆 工 具 ”， 设置 前 景色 为 R219、G0、B20,， 在 两 个 手 
提包 的 中 间 位 置 绘制 一 个 红色 的 小 圆 。 


步骤 14 使 用 “ 横 排 文字 工具 ”输入 文字 
选择 “ 横 排 文字 工具 ”， 在 红色 的 小 加 中 间 输 入 “+” 符 号 。 输 入 后 为 了 突出 优惠 力度 ， 打 开 “ 字 符 ” 面 板 , 将 “+” 的 字 
体 设置 为 较 粗 的 方正 超 粗 黑 简 体 ， 并 把 颜色 设置 为 日 色 。 


方正 超 粗 黑 简 ,， 
TT 2m 


pI 


步骤 15 ”继续 添加 更 多 图 形 和 文字 


结合 “ 模 排 文字 工具 ”和 图 形 绘制 工具 ， 在 红色 的 手提 包 旁 边 设置 醒目 的 价格 信息 。 设 置 后 选中 红色 起 形 所 在 图 层 ， 执 
行 “ 图 层 > 创 建 剪 贴 蒙 版 ”菜单 命令 ,将 矩形 置 于 日 色 圆 形 内 部 。 


特惠 包 邮 特惠 包 邮 
¥89 
扣 击 购 


凡 击 购 头 


步骤 16 添加 手提 包 图 像 


使 用 相同 的 方法 ， 打 开 素 材 文件 14jpg， 将 其 抠 取 出 来 ， 并 添加 相应 的 促销 信息 。 


特惠 包 邮 


步骤 17 ”复制 并 添加 秋 叶 素材 


为 了 便于 顾客 收藏 店铺 ， 接 下 来 创建 “收藏 ”图 层 组 。 打 开 素 材 文件 15.psd， 将 打开 的 图 像 复制 到 “收藏 ”图 层 组 中 。 


步骤 18 设置 “投影 ”样式 


选择 “椭圆 选 框 工具 ”， 在 秋 叶 图 像 上 单 击 并 拖 灸 鼠标， 绘制 一 个 日 色 的 小 加 。 执 行 “ 图 层 > 图 层 样 式 > 投 影 ”菜单 命令 ， 
打开 “图 层 样式 ”对 话 框 ， 在 对 话 框 中 设置 “投影 ”样式 选项 ， 设 置 后 单 击 “ 确 定 ” 按 钮 ， 应 用 样式 。 


投影 


反问 


混 人 模式 : | 下 ;又 记 “| 国 国 


不 要 明 度 (0}: 一 一 二 一 一 一 % 


所 度 (A): ( 、 ) 讼 


(0): ~ 侈 素 
扩展 (R): 一 % 
大 小 (5): 一 一 一 一 一 像素 


步骤 19 ”输入 文字 完成 设计 


选择 “钢笔 工具 ”， 在 圆 形 旁边 绘制 黑色 的 线条 。 绘 制 完成 后 ， 结 合 “ 横 排 文字 工具 ”和 图 层 样式 ， 在 图 像 右 侧 输 入 更 多 的 


文字 信息 。 


BOOKMARK | 


实例 78 ” 店 招 与 导航 的 结合 设计 


本 实例 是 为 银饰 店 设 计 的 店 招 图 像 ， 在 设计 的 过 程 中 ， 将 画面 进行 合理 分 配 ， 将 店 招 与 导航 结合 起 来 编排 ， 视 总 中 心 位 置 的 
主体 文字 则 使 用 生动 的 编排 方式 ， 通 过 用 工整 的 宋体 和 随 性 的 行书 相 搭 配 ， 在 视 党 上 达到 一 种 平衡 而 不 呆板 的 效果 。 同 时 在 背景 
图 像 的 选择 上 ， 根 据 饰品 的 特点 和 风格 ， 用 古典 的 欧式 花纹 作 底 纹 ， 增 强 了 整个 图 像 的 设计 美感 。 下 面 简单 介绍 设计 要 点 和 版 式 
构成 等 。 


素 材 
源 文件 
填充 孔 瞧 蔬 作 为 背景 图 层 ， 黄 定 画面 的 自然 基调 。 
主体 文字 占据 画面 左 半 部 分 ， 将 店铺 信息 在 第 一 时 间 传 递 出 去 ， 配 合 店铺 广告 语 ， 使 店 招 更 具有 表现 力 ， 更 
或 沉 


本 言 所 有 商品 Y 。 首页 | 。 新 品 速 递 ”| ”999 纯 银 专场 | ”戒指 尺寸 测量 和 对 照 表 | 
随 书 资源 \ 素 材 \09\16、17.psd 
随 书 资源 \ 源 文件 \09\ 店 招 与 导航 的 结合 设计 .psd 
彰显 店铺 及 商品 品牌 定位 。 
， 同 时 也 能 间接 


设计 分 析 
刁 
选择 经 典 的 欧式 复古 花纹 填充 青 景区 域 ， 丰 富 画 面 效果 ， 


设计 要 点 01 
设计 要 点 02 
设计 要 点 03 


能 吸引 顾客 的 注意 


色 ， 轻 僵 、 舒 变 、 澄 澈 的 颜色 给 人 一 种 干净、 舒适 的 感 


画面 上 方 使 用 孔雀 蓝 为 背景 
显得 稳定 而 富有 设计 感 ， 让 顾客 将 


画面 下 方 用 粉红 色 与 图 像 上 方 的 蓝 色 搭配 ， 对 比 颜色 的 表现 让 简单 的 画面 玩具 有 时 尚 感 。 
在 本 实例 的 布局 设计 中 ， 将 画面 分 为 了 3 个 不 同 的 区 域 。 其 中 ， 元 上 部 分 为 店铺 名 称 、 店 铺 广告 语 ， 右 上 部 分 为 丢 饰 性 元 


配色 方案 
本 实例 采用 对 比 配色 ， 
的 特征 。 


反映 出 店铺 中 饰品 
类 导航 ，3 个 部 分 各 成 独立 的 区 域 。 不 完全 对 称 的 版 面 构成 万 式 让 图 像 


版 式 分 析 

素 ， 下 半 部 分 为 商品 分 
更 多 的 注意 力 放 到 店 招 的 信息 上 。 
等 样式 加 强 图 形 的 立体 感 。 
a 


“投影 ” 
外; 用 “椭圆 工具 ”在 要 突出 表现 的 文字 上 绘制 图 形 ， 


NS] ™ 
~ 三 
记 IN 


: 使 用 “钢笔 工具 绘制 不 规则 图 形 ， 通 过 添加 “斜面 和 浮雕 
` 把 欧式 花纹 图 像 复制 到 绘制 的 图 形 上 ， 创 建 剪 贴 蒙 版 将 多 余 的 花纹 图 像 隐 藏 起 来 。 


技术 要 扣 
使用“ 横 排 文 字 工具 ”在 画面 中 输入 店铺 名 、 店 铺 广 告 及 分 类 1 


实例 79 “粉色 唯美 风格 的 女装 店 店 招 设计 


本 实例 是 为 某 品 牌 女 六 店 设 计 的 店 招 图 片 ， 在 设计 中 根据 年 轻 女 性 所 喜欢 的 色彩 ， 及 用 了 较 浪漫 的 粉 监 配色 风格 ,利用 唯美 
的 花 米 图像 作为 背景 ， 整 体 画 面 显得 更 加 柔美 ， 应 用 不 同 风 格 的 字体 把 店铺 名 、 上 店铺 销售 的 商品 类 型 等 重要 信息 表现 出 来 ， 通 过 
文字 的 大 小 和 颜色 变化 让 男 面 层级 更 显 分明 ， 给 人 张 闻 有 度 的 印象 。 下 面 简单 介绍 设计 要 点 和 版 式 构成 等 。 


OINYA Bn NE i 


素 材 随 书 资源 \ 素 材 \09\18.jpg 
源 文 件 随 书 资源 \ 源 文件 \09\ 粉 色 唯 美 风格 的 女装 店 店 招 设计 .psd 


设计 分 析 
设计 要 点 01: 粉 蓝 色 的 背景 给 人 人 优雅、 高贵、 时尚、 青春 的 感觉 ， 符 合 女装 店 的 品牌 特征 。 


“ 设计 要 点 02: 画面 中 的 淡 粉 色 给 人 热情 洋溢 的 感觉 ， 而 淡 蓝 色 给 人 清爽 、 知 性 的 感觉 ， 冷 暖色 对 比 运用 ， 得 到 更 美妙 的 视 


-设计 要 点 03: 店铺 名 称 和 店铺 活动 文字 信息 选用 了 不 同 的 字体 和 颜色 表现 ， 配 合 淡雅 、 清 新 的 背景 图 像 ， 使 店 招 更 具有 表 


现 性 o 


配色 方案 


本 实例 采用 了 对 比 配色 方案 ， 在 育 景 的 处 理 上 ， 通 过 对 颜色 的 修饰 ， 利 用 红色 和 监 色 的 色相 差异 ， 打 造 出 颇具 节奏 感 的 图 
像 ， 同 时 为 了 让 画面 的 风格 更 加 统一 ， 在 文字 的 配色 上 也 采用 了 与 背景 颜色 相近 的 色彩 ， 这 样 的 色彩 搭配 方式 让 画面 显得 更 为 简 
洁 ， 且 不 失 完 整 性 。 


版 式 分 析 


本 实例 在 版 式 布 局 中 ， 将 画面 大 致 分 为 3 个 区 域 ， 通 过 在 各 个 区 域 放置 不 同 的 文字 信息 ， 利 用 文字 间 的 大 小 和 颜色 变化 吸引 
顾客 的 视线 。 其 中 ， 男 面 左 侧 区 域 为 店铺 名 称 及 店铺 主要 销售 商品 的 说 明 ， 用 了 较 大 一 些 的 文字 进行 突出 表现 ， 中 间 部 分 是 店铺 
最 新 的 动态 信息 ; 石 侧 则 是 收藏 区 。 这 3 部 分 利用 合理 的 布局 分 布 平 衡 视 区 ， 增 强 了 画面 感染 力 。 


技术 要 扣 


使 用 “高 斯 模糊 ” 滤 镜 模糊 花 条 背景 图 像 ， 创 建 柔美 的 画面 效果 。 
“ 结合 “调整 ”面板 和 “属性 ”面板 对 模糊 后 的 背景 图 像 进行 凑 色 调整， 将 图 像 打 造 为 梦幻 的 粉红 色调 。 


使 用 文字 工具 在 图 像 上 输入 文字 ， 结 合 图 层 样 式 为 文字 添加 描 边 、 外 发 光 等 效果 。 


实例 80 ”暗黑 烃 栈 的 美食 店 店 招 设计 
本 实例 是 一 家 专门 销售 坚果 的 食品 店 设计 的 店 招 ， 在 设计 的 过 程 中 采用 了 浓度 较 高 的 黑色 作为 背景 ， 并 将 店铺 中 的 商品 添加 
于 店 招 图 像 右 侧 ， 利 用 直观 的 商品 展示 来 刺激 顾客 的 购买 欲望 ， 此 外 为 了 便于 顾客 在 店铺 中 查找 、 搜 索 商 品 ， 还 添加 了 搜索 功 


能 。 下 面 对 此 实例 的 设计 要 点 和 版 式 构 成 等 进行 分 析 。 


Oo 
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两 只 松鼠 ” 热 搜 关键 词 : 巴 旦 木 医 根 果 夏威夷 果 


素材 随 书 资源 \ 素 材 \09\19.jpg、20.psd 


源 文件 随 书 资源 \ 源 文件 \09\ 暗 黑 炫 酷 的 美食 店 店 招 设计 .psd 


芝 计 全 俐 
- 设计 要 点 01: 在 黑色 的 背景 中 用 醒目 的 白色 文字 将 店铺 名 称 表现 出 来 ， 加 深 顾 客 对 店铺 的 印象 。 
. 设计 要 点 02: 画面 中 心 用 文字 对 店铺 商品 的 销量 加 以 说 明 ， 同 时 添加 的 搜索 功能 使 店 招 显得 更 为 实用 。 


设计 要 点 03: 为 了 让 顾客 了 解 店 铺 销 售 的 主要 商品 及 其 特点 ， 将 坚果 图 像 添加 于 画面 右 侧 ， 通 过 去 底 让 商品 融入 到 新 的 背 
景 中 。 


配色 方案 


本 实例 为 了 突出 画面 中 的 坚果 ， 在 配色 过 程 中 及 用 无 彩色 的 黑 日 调 ， 统 一 而 和 谐 ， 给 人 静 各 、 严 谨 的 感 先 ， 与 小 面积 的 柳 红 
色 、 褐 色 搭 配 起 来 ， 更 使 其 成 为 视 名 焦点 ， 让 顾客 目 然而 然 地 将 注意 力 放 企 店 招 中 的 坚果 图 像 上 。 


版 式 分 析 


在 本 实例 的 布局 设计 中 ， 通 过 在 画面 两 侧 添 加 颜色 相似 的 标志 和 商品 图 像 ， 达 到 和 谐 统 一 的 效果 ， 使 画面 元 素 在 对 称 中 产生 
一 定 的 变化 ， 继 而 把 顾客 的 目光 吸引 到 品牌 和 商品 部 分 ， 同 时 ， 利 用 画面 中 间 的 文字 将 图 像 两 侧 的 标志 和 商品 图 像 衔接 起 来 ， 让 


画面 显得 更 为 完整 。 


技术 要 点 
` 使 用 “添加 杂 色 ” 滤 镜 在 背景 中 添加 杂 色 颗粒 ， 增 强 和 画面 的 质感 。 


- 用 “移动 工具 把 品牌 标志 和 商品 照片 添加 至 画面 中 ， 设 置 图 层 样式 表现 立体 的 视 党 效果， 并 创建 图 层 蒙 版 抠 出 商品 图 
像 。 


. 使 用 “ 横 排 文字 工具 ”在 画面 中 输入 文字 信息 ， 用 “ 拢 形 工具 ”绘制 商品 搜索 栏 ， 便 于 顾客 快速 查找 商品 。 


实例 81 怀旧 色调 的 灯具 店 店 招 设计 


本 实例 是 为 某 品牌 的 灯具 店 设计 的 店 招 ， 为 了 突显 店 招 的 意境 ,设计 时 把 灯具 图 像 作为 背景 ， 通 过 明暗 的 对 比 来 增强 画面 的 
层次 ， 并 利用 “渐变 又 加 ”样式 来 丰富 店 招 文字 的 色彩 ， 使 其 呈现 一 定 的 光泽 感 ， 让 它 与 店铺 所 售 商 品 的 特质 相符 。 下 面 简单 分 
析 本 实例 的 设计 要 点 、 构 图 特色 等 。 


新 店 和 并 % 


品 双重 优惠 
OD 


素 材 随 书 资源 \ 素 材 \09\21.jpg 
源 文件 随 书 资源 \ 源 文件 \09\ 怀 旧 色 调 的 灯具 店 店 招 设计 .psd 


设计 分 析 


“ 设计 要 点 01: 由 于 此 实例 是 为 灯具 店 设计 的 店 招 ， 为 了 突出 主题 ， 在 设计 时 选择 了 灯具 图 片 作 为 背景 ， 通 过 明暗 的 变化 深 


化 了 王 题 。 

“ 设计 要 点 02: 将 店铺 的 徽标 放 在 店 招 的 最 左 侧 ， 并 在 劣 边 输 入 店铺 名 称 ， 让 店 招 更 加 显眼 。 

` 设计 要 点 03: 通过 在 画面 中 添加 优惠 活动 和 相关 的 服务 信息 丰富 店 招 的 内 容 ， 表 现 更 多 的 店铺 动态 信息 
配色 方案 


本 实例 在 配色 时 以 暖色 调 为 主 ， 因 为 灯光 除了 照明 以 外 ， 还 经 常 被 赋予 一 种 温暖 、 家 的 概念 ， 所 以 在 设计 时 用 暖色 搭配 能 够 
让 这 种 氛围 更 加 强烈 ， 而 适当 地 使 用 黑 、 日 色 图 形 作 为 装饰 ， 可 以 形成 强烈 的 颜色 反差 ， 从 而 突出 店 招 中 间 的 重要 信息 。 


版 式 分 析 


在 本 实例 的 布局 设置 中 ， 画 面 以 灯具 图 像 作为 背景 ， 在 中 心 位 置 添加 图 形 ， 然 后 以 左右 对 称 的 方式 安排 文字 信息 。 其 中 ， 左 
侧 为 店铺 名 和 店铺 徽标 ， 石 侧 为 店铺 最 新 动态 信息 。 另 外 ， 通 过 在 文字 芳 边 添加 部 分 装饰 图 形 ， 使 文字 更 有 分 量 。 


技术 要 点 
“ 把 拍摄 的 灯具 图 像 添加 至 背景 中 ， 利 用 “调整 ”面板 和 “属性 ”面板 对 上 照片 的 颜色 进行 调整 ， 呈 现 更 温暖 的 画面 效果 。 


` 使 用 “ 矮 形 工具 在 画面 的 中 间 位 置 绘制 黑色 矩形 ， 调 整 图 层 混合 模式 ， 设 置 透 明 效 果 。 使 用 “ 横 排 文字 工具 在 绘制 的 
矩形 中 输入 文字 。 


“ 运用 “钢笔 绘制 不 规则 图 形 ， 显 示 店 铺 最 新 动态 信息 。 


第 10 章 ”导航 条 设计 


本 店 所 有 商品 每 周 特价 水 果 海南 水 果 专区 顺丰 快速 专区 


本 店 所 有 商品 ”首页 “秋季 新 品 。 牛仔 裤 “ 养 牛 手册 所 有 商品 
红心 多 猴 桃 
软 籽 石 机 
越南 芒果 
凯特 芒果 
泰国 百 香 果 


导航 条 是 依附 在 店 招 下 方 的 一 个 细 长 的 矩形 ， 它 的 主要 作用 是 对 商品 和 服务 进行 分 类 ， 方便 顾 客 通 过 页 面 跳 转 快速 访问 所 需 
要 的 内 容 。 设 计 导航 条 时 应 当 使 其 外 观 和 色彩 与 店 招 、 店 铺 整体 委 修 风格 协调 。 在 设计 导航 条 的 过 程 中 ， 需 要 考虑 导 舰 条 中 信息 
的 处 理 ， 要 简明 扼要 ， 整 齐 简洁 ， 避 免 过 于 复杂 ， 计 顾客 能 够 直观 地 感受 到 店铺 商品 的 分 类 人 信息， 这样 才能 更 好 地 起 到 引导 作 


用 。 有 时 为 了 增强 导航 条 的 设计 感 ， 也 可 以 适当 添加 一 些小 的 图 形 ， 具 体 情况 根据 画面 而 定 。 


82 ”时 尚 简洁 风格 的 导航 条 设计 
83 布 纹 质感 风格 的 导航 条 设计 
84 ”清新 明快 风格 的 导航 条 设计 
85 ”突显 立体 感 的 导航 条 设计 

86 清谈 活泼 风格 的 导航 条 设计 
87 ” 木 纹 质感 风格 的 导航 条 设计 
88 小 清新 风格 的 导航 条 设计 


89 ”手机 问 店 招 与 导航 设计 


实例 82 ”时 尚 和 位 阅 风格 的 导航 条 设计 


本 实例 是 简洁 风格 的 导航 条 图 片 ， 在 配色 时 选择 暗 红色 为 主 色 ,给 人 温暖 的 视觉 感受， 在 导航 条 中 间 用 红色 的 互补 色 绿 色 作 
为 底 色 ， 将 店铺 的 名 称 、 微 标 突显 出 来 ， 对 店铺 品牌 进行 强调 ， 给 顾客 留 下 深刻 印象 。 


首页 有 惊喜 所 有 产品 胡 模 木 馆 海棠 木 馆 客厅 系列 卧 军 系列 餐厅 系列 书房 系列 


所 有 产品 分 类 
客厅 系列 


源 文 件 随 书 资源 \ 源 文件 \10\ 时 尚 简洁 风格 的 导航 条 设计 .psd 


步骤 01 在 新 建文 件 中 为 背景 填充 产 色 


启动 Photoshop 程 序 ， 将 背景 色 设 置 为 R242、G239、B220,，, 执行 “文件 > 新 建 ” 菜 单 命令 , 打开“ 新建” 对 话 框 ,根据 网 
店 导航 条 的 尺寸 要 求 在 “新 建 ” 对 话 框 中 设置 选项 ， 单 击 “ 确 定 ” 按 钮 ， 新 建 一 个 空 日 文件 。 由 于 此 实例 需要 制作 简洁 风格 的 导 
航 条 ， 因 此 在 设计 前 需要 定义 画面 的 背景 主 色 ， 并 创建 “ 导 般 条 ”图 层 组 。 


宽度 (W): |950 


高 度 (H): | 279 
分 辨 诗 ( 内 : |72 
ma 导航 条 颜色 模式 : | RGB 颜色 < 


OD 〇 加 者 且 背景 内 容 : | 背景 色 


步骤 02 创建 复合 图 形 


选择 “ 炬 形 工 具 ”， 设 置 前 景色 为 黑色 ， 在 画面 左 侧 单 击 并 拖 忠 女 标 ， 绘 制 一 个 黑色 的 粉 形 。 选 择 “ 钢 笔 工 具 ”， 单 击 选 项 
栏 中 的 “路 径 操作 ”按钮 ， 在 展开 的 下 拉 列 表 中 单 击 “ 合 并 形状 ”选项 ， 绘 制图 形 ， 创 建 复合 形状 。 


和 与 形状 区 域 相交 
山 排除 重生 形状 


| oh TT | £3 志 
| [一 和 上 上 Pr 本 | 
= -bb 1 


步骤 03 ”设置 并 应 用 样式 


为 了 让 绘制 的 图 形 与 店铺 装修 风格 更 统一 ， 可 以 对 图 形 颜色 进行 调整 。 执 行 “ 图 层 > 图 层 样式 > 渐变 硬 加 ”菜单 命令 ， 打 
开 “ 图 层 样式 ”对 话 框 ， 在 对 话 框 中 设置 “渐变 填 加 ”选项 ， 为 图 像 玛 加 渐变 凑 色 。 


新 枉 呈 加 平 独 度 (M): | 100| | 驳 
新 变 \ 


混合 模式 : | 正 :| [] 1 
不 透明 度 (P 一 |100 | 
ME: -| 电击 ®) 不通 明度 (P}: : 
角度 (N): ( | ) s0 “| 度 样式 : I 绪 Yi 与 图 层 对 齐 (1) 
(Ss) 一 [0o |% A ( 、 p | 度 [二 对 讲 
”设计 为 驾 认 值 | [ 人 位 为 默认 值 纺 有 (5 oo— 00 |% 


步骤 04 ”复制 图 形 调整 大 小 


按 下 快捷 键 Ctrl+J， 复 制图 形 ， 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 ， 按 住 Shift+Ctrl 键 不 放 ， 拖 忠 编 辑 框 ， 对 图 形 进 
行 等 比例 缩小 处 理 。 


步骤 05 ”设置 图 层 样式 


经 过 上 一 步 操作 ， 调 整 了 图 形 大 小 ， 但 是 两 个 图 形 的 颜色 相同 ， 无 法 表现 妓 加 的 画面 效果 。 双 击 图 层 ， 打 开 “ 图 层 样式 ”对 
话 框 ， 在 对 话 框 中 重新 对 样式 进行 设置 。 设 置 完成 后 单 击 “ 确 定 ” 按 钮 ， 应 用 样式 效果 。 


站 内 时 ; 
革 构 


温 合 恒 式 : | 正片 委 必 | | 


不 和 明度 (0 bs |% 


角度 人) CS ) 度 ”|_| 使 用 全 局 光 (6) 


jial | | 二 
了 E 暴 (0C): /5 - 0 |% 
小: 一 一 一 一 [2 | 认 


误 受 加 
新 变 


汇合 模式 : | 正常 
直通 明度 (pj，， 00 | 
I: I Fa) 
tp JE 
| 注 外 贺喜 人) 样 民 : | 经 引 加 与 图 层 对 齐 加 
号 角度 (N): . 一 0 “| 度 | 重要 对 齐 | 
皇 joF 后 [ 1 (5): = 00 |% 


小 (Sk 她 


步骤 06 使用“ 目 形 工具 ”绘制 灰色 矩形 


为 了 让 绘制 的 图 形 表 现 出 立体 的 视 腕 效果 ， 需 要 进行 投影 的 添加 。 设 置 前 景色 为 R39、G39、B39,， 选择 “和 矩形 工具 ”， 在 
选项 栏 中 设置 各 选项 ， 在 之 前 绘制 好 的 图 形 下 单 击 并 拖 蝶 女 标 ， 绘 制 深 灰 色 和 矩形 。 


国生 填充 :| J 朱 坊 :了 


步骤 07” 用 “ 谭 变 工具 ”设置 渐 隐 效果 


选择 “渐变 工具 ”， 单 击 “ 渐 变 ” 拾 色 器 下 的 “ 黑 ， 日 渐变 ”， 从 深 灰 色 和 矩形 底部 向 上 拖 忠 ， 释 放 妃 标 后 ， 得 到 渐 隐 的 图 形 
效果 ， 此 时 可 以 看 到 添加 投影 后 的 效果 。 


有 本国 天 


步骤 08 使 用 “画笔 工具 ”编辑 图 层 蒙 版 


为 了 让 添加 的 投影 显得 更 目 然 ， 选 择 “画笔 工具 ”， 设 置 前 景色 为 黑色 ， 降 低 不 透明 度 后 ， 在 灰色 起 形 两 侧 单 击 并 涂抹 ， 经 
过 反复 涂抹 ， 隐 藏 图 形 。 


不 盘 明 度 : 21% 刁 


步骤 09 使 用 “钢笔 工具 ”绘制 三 角形 


继续 使 用 同样 的 方法 ， 在 不 规则 的 图 形 右 侧 再 绘制 和 矩形， 将 其 设置 为 投影 效果 。 选 择 “钢笔 工具 ”， 设 置 前 景色 为 黑色 ， 在 
画面 中 连续 单 击 ， 再 绘制 一 个 黑色 的 三 角形 。 


步骤 10 设置 “颜色 区 加 ”样式 效果 


绘制 完 后 ， 发 现 绘制 的 三 角形 与 下 方 的 图 形 颜色 反 产 太 明 显 了 。 因 此 执行 “图 层 > 图 层 样 式 > 颜 色 艾 加 ”菜单 命令 ， 打 
开 “ 图 层 样式 ”对 话 框 ， 在 对 话 框 中 将 颜色 设置 为 R62、G17、B0， 设 置 后 单 击 “ 确 定 ” 按 钮 ， 应 用 样式 ， 统 一 画面 色调 。 


前 色 登 加 
颜色 


混合 模式 : | 正常 加 
不 透明 朗 (0: 一 CI % 


技巧 提 示 : 更 改 于 加 颜色 


颜色 有 登 加 样式 下 ， 如 果 要 更 改 晤 加 的 颜色 ， 只 需要 单 击 右 侧 的 颜色 块 ， 在 打开 的 “ 拾 色 器 ( 壹 加 颜色 ) ”对 话 框 中 重新 
输入 颜色 ， 单 击 “ 确 定 ”按钮 即 可 。 


步骤 11 使 用 “和 矩形 工具 ”绘制 灰色 矩形 


经 过 前 面 的 操作 ， 完 成 了 导航 条 元 侧 外 形 轮廓 的 绘制 ， 接 下 来 是 导航 条 中 间 部 分 的 绘制 。 选 择 “起 形 工具 ”， 设 置 绘制 模式 
为 “形状 ”， 填 充 颜色 为 灰色 ， 在 画面 中 间 单 击 并 拖 蝶 鼠标 ， 绘 制 一 个 灰色 的 算 形 。 


步骤 12 ”设置 多 个 图 层 样式 


绘制 图 形 后 需要 统一 图 形 颜 色 ， 执 行 “ 图 层 > 图 层 样 式 > 摘 边 ” 荣 单 命 令 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 勾 选 “ 描 
边 ”“ 内 阴影 ”和 “颜色 蔷 加 ”样式 ， 并 设置 对 应 的 样式 选项 。 


内 阴影 
结构 
大 (5: | 台 混合 模式 : [ 正常 | 国 国 
:| Np ;| 不 生 明度 (0): 一 2 一 |50 |% 
混合 模式 : | 正常 3] 个 
不 透明 度 (0}: 可 [100 |% 角度 (A): 度 [| 使 用 全 局 光 
加 EE 20): 一 一 一 优 素 
填充 类 型 : | 颜色 :| 了 :0 |% 


大 小 (5): G |o | 名 


不 各 明度 (0): 


步骤 13 ”查看 应 用 样式 的 效果 


设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 应 用 图 层 样 式 ， 此 时 在 图 像 窗口 中 可 看 到 应 用 样式 后 的 矩形 效果 。 


步骤 14 复制 图 形 调整 大 小 


按 下 快捷 键 Ctrl+J， 复 制 和 矩形， 执行“ 编辑 > 变换 路 径 > 上 自由 变换 ”菜单 命令 ,打开 目 由 变换 编辑 框 ， 将 鼠标 移 至 编辑 框 边 
缘 位 置 ， 单 击 并 向 内 侧 拖 息 ， 缩 小 矩形 图 形 。 


步骤 15? 设置 并 应 用 样式 


复制 并 调整 图 形 大 小 后 ， 友 现 两 个 图 形 颜 色 太 相近 ， 无 法 区 分 开 来 。 因 此 执行 “图 层 > 图 层 样式 > 内 阴影 ”菜单 命令 ， 打 
开 “ 图 层 样式 ”对 话 框 ， 在 对 话 框 中 设置 “内 阴影 ”和 “颜色 苹 加 ”样式 ， 设 置 完 成 后 单 击 “确定 ”按钮 ， 应 用 样式 效果 。 


结构 
Siai:[ 6 国 国 
不适 明度 10)， 二 > oe 

角度 [有 ): C1) 度 传 用 全 局 Bi {6) 

| 5): 和 lo | 公 专 


颜色 严 加 


步骤 16 ”完成 更 多 图 形 的 绘制 


继续 使 用 同样 的 方法 ， 运 用 图 形 绘制 工具 绘制 更 多 图 形 ， 得 到 更 完整 的 导航 条 轮廓 。 


步骤 17 使 用 “ 横 排 文字 工具 ”输入 导航 信息 


绘制 完成 导航 条 轮廓 后 ， 接 下 来 束 根 据 店铺 中 商品 的 分 类 ， 输 入 分 类 人 信息。 选择“ 横 排 文字 工具 ”， 在 导航 条 上 方 输入 文 
字 ， 输 入 后 打开 “字符 ”面板 ， 将 文字 字体 设置 为 较 工整 的 黑体 ,方便 顾客 阅读 。 


首页 有 惊喜 ” 所 有 产品 。“ 胡 桃木 馆 。 ” 海 党 木 馆 


Adobe 时 体 SE .. 


反 巧 提示 : 更 改 部 分 文字 的 属性 


果 要 对 导航 条 中 部 分 文字 的 字体 、 大 小 等 属性 进行 更 改 ， 则 可 用 “ 横 排 文字 工具 或 “ 直 排 文 字 工 具 ”在 要 更 改 的 文字 上 单 
击 并 拖 提 ， 将 文字 选中 ， 然 后 在 “字符 面板 中 进行 选项 的 设置 。 


步骤 18 设置 “投影 ”样式 


为 了 让 输入 的 文字 更 有 立体 感 ， 双 击 文字 图 层 ， 打 开 “ 图 层 样式 ”对 话 框 ， 在 对 话 框 中 多 选 “投影 ” 复 选 框 ， 并 设置 “ 投 
影 ” 选 项 。 设 置 后 单 击 “ 确 定 ” 按 钮 ， 应 用 样式 ， 为 文字 添加 投影 效果 。 


”投影 

结构 
混合 模式 : 
不 透明 度 [0): 75 |% 


首页 有 惊喜 


前 度 (A): wy 度 门 使 用 全 局 光 


扩展 (RY: Ps oe 


步骤 19 使 用 “ 横 排 文字 工具 ”输入 分 类 信息 


所 有 产品 胡桃 木 馆 


选择 “ 横 排 文字 工具 ”， 在 夷 直方 向 的 导航 条 上 继续 输入 文字 ， 输 入 后 打开 “字符 ”面板 ， 在 面板 中 设置 相同 的 字体 ， 并 适 


当 缩 小 字号 ， 使 分 类 信息 更 加 详细 。 


所 有 产品 胡 枢 林 馈 豆 厅 系 到 卧 晶 系 列 


1 所 有 产品 颁 咒 
填 厅 系列 


最 厅 标 到 
要 巴 坦 音 搭配 


步骤 20 ”设置 并 应 用 样式 


师 厅 系列 书 改 系列 


为 了 加 深 顾 客 对 店铺 品牌 的 印象 ,继续 在 导航 条 中 绘制 标志 图 案 。 新 建 “ 店 铺 LOGO” 图 层 组 ， 设 置 前 景色 为 R95、G87、 
B35， 选 择 “ 椭 圆 工 具 ”， 按 住 Shift 键 不 放 ， 在 导航 条 中 间 位 置 单 击 并 拖 虹 鼠标， 绘制 一 个 正 圆 图 形 。 执 行 “图 层 > 图 层 样 式 > 
摘 边 ”菜单 命令 ,打开 “图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 设置 选项 ， 为 绘制 的 圆 形 添加 样式 ， 得 到 风格 更 为 统一 的 画面 。 


措 边 ee 
tat: 全 
7 人 (人 像素 | ”和 昌 度 (P 一 一 zs % 
混合 模式 : | 正常 :| 
不 透明 度 (0): 一 % 
| 要 E 


| HS: [ESEE “| 国生 
:| QU Rw TH en | 


3 给 3 | 3 ms: 
样式 局 与 图 层 对 齐 角度 (A): 站 ! ) 度 | | 使 用 全 局 光 (G) 
角度 (A | ! ) [50 | 大 bk 一 一 一 ”人 


A eaeaeaeaeaeaeaeawesl 
MM): 


纺 (C0: = |100 |% 


客厅 系列 卧 至 系列 餐厅 系列 


步骤 21 复制 图 形 调整 样式 


连续 按 下 快捷 键 Ctrl+J， 复 制 “椭圆 1” 图 层 ， 得 到 “椭圆 1 拷贝 ”和 “椭圆 1 拷贝 2” 图 层 , 按 下 快捷 键 Ctrl+T， 打 开 上 自由 
变换 编辑 框 ， 调 整 复制 的 图 形 大 小 。 调 整 大 小 后 根据 画面 效果 对 样式 做 适当 的 调整 ， 得 到 蔷 加 的 圆 形 图 形 。 


/ny 情 吕 1 拷 风 2 
| 蕊 ” 酚 图 1 拷贝 
迄 椭圆 1 


海 菜 木 饮 | 客厅 系列 卧 至 系列 


步骤 22 使 用 “ 横 排 文字 工具 ”输入 店铺 名 


使 用 “椭圆 工具 ”在 绿色 辆 下 万 绘制 黑色 椭圆 ， 添 加 图 层 蒙 版 ， 隐 藏 部 分 图 形 ， 创 建 投影 效果 。 选 择 “ 横 排 文字 工具 ”， 在 
加 形 中 间 位 置 单 击 并 输入 店铺 名 称 ， 为 了 增强 视 完 /中 击 力 ， 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 ， 并 在 选项 栏 中 设置 “旋转 
角度 ”为 -10， 旋 转 文字 效果 。 


客厅 系列 海 染 木 包 


H: 100.00% .A 六 度 


步骤 23 ”使 用 “ 目 定 形状 工具 ”绘制 委 饰 图 案 


选择 “ 目 定 形状 工具 ”， 单 击 “ 形 状 ” 石 侧 的 下 拉 按 钮 ， 在 展开 的 “形状 ” 拾 色 器 中 单 击 “ 花 3” 形 状 ， 在 店铺 名 称 和 旁边 单 
击 并 拖 忠 鼠标 ， 绘 制 花 米 图 案 ， 完 成 店铺 微 标 图 案 的 设计 。 人 至 此 ， 已 完成 本 实例 的 制作 。 


午 厅 加 列 娃 章 顶 悦 履 厅 卫 利 树 计 机 弄 


兽王 有 随 上 击 耳 有 产 唱 胡 嫩 志恒 测 证 末 悟 中 | 


六 贞 产量 捉 民 
ad 

二 | 此 1 

量 所 系 再 

守 嘱 轩 辣 所 丁 


实例 83 ” 布 纹 质感 风格 的 导航 条 设计 


本 实例 是 为 牛仔 专卖 店 设 计 的 导 舰 条 ， 在 导 舰 栏 中 将 与 主题 相关 的 牛仔 裤 素 材 图 像 到 加 于 导 舰 条 上 方 ， 深 化 了 主题 ， 顾 客 通 
过 图 片 瓯 能 清 芭 地 知道 店铺 所 销售 的 主要 商品 。 为 了 增强 画面 的 质感 ， 在 导航 条 中 将 图 层 样式 嗜 加 起 来 ， 表 现 更 有 质感 的 画面 效 


宋 。 


本 店 所 有 商品 “首页 “秋季 新 品 。 人 牛仔裤 “ 养 牛 手册 


素 材 随 书 资源 \ 素 材 \10\01、02.jpg 


随 书 资源 \ 源 文件 \10\ 布 纹 质感 的 导航 
小 义 件 条 设计 .psd 


步骤 01 在 新 建 的 文件 中 为 背景 填充 颜色 


局 动 Photoshop 程 序 ， 新 建 一 个 空 日文 件 。 由 于 本 实例 是 为 牛仔 专卖 店 设计 的 导 舰 条 ， 因 此 根据 牛仔 服饰 的 颜色 特点 ， 将 


， 将 前 景色 设置 为 RD?1、G58、B68， 使 用 “ 窍 形 工具 ”绘制 一 个 比 背 景 稍 大 的 矩形 。 


育 景 定 义 为 监 色 ， 将 前 景 


为 了 让 背景 表现 出 纹理 质感 ， 执 行 “ 滤 镜 > 杂 色 > 添 加 杂 色 ”菜单 命令 ,打开 “添加 杂 色 ”对 话 框 ， 在 对 话 框 中 设置 选项 ， 
单 击 “确定 ”按钮 ， 为 图 像 添加 杂 色 效果 。 


加 杂 公 ， 


[ 取消 | 
IY 预 袖 (P) 


= 100% 恩 
数量 (A): | 3.87 % 


re 
Ey 


分 布 
[地 | 平均 分 布 (U) 
中 高 斯 分 布 (6) 


w| 单 色 (M) 


添加 杂 色 后 友 现 图 形 的 质感 不 是 很 明显 ,执行 “图 层 > 图 层 样 式 > 和 斜面 和 浮雕 ”菜单 命令 ,打开 “图 层 样 式 ” 对 话 框 ， 在 对 
话 框 中 设置 “斜面 和 浮雕 ”选项 ， 再 勾 选 “纹理 ”样式 ， 单 韦 “水彩” 纹理， 设置 后 蛙 击 “确定 ”按钮 ， 应 用 样式 。 


样式 : : 

方法 : | 种 ] \ 》 ; 贴 蛇 原 点 (A) 
深度 [Dj lo | 

:WL CO Mh(S): 0 |10 |% 
大 小 2D): = 一 一 [29 | 佛 深度 (D): T +10 |% 
软化 (Fi: < lo | 


角度 IJj: 。。 .205 | 度 
* | [w|i 使 用 全 局 光 (6) 
高 度 : [6 | 度 
光泽 等 高 线 ; - _] 消除 所 齿 (L) 
高 光 模 式 : | : 
不 透明 度 (0): ， 
阴影 模式 : 


不 透明 度 (C): 


经 过 前 面 几 步 操作 ， 完 成 了 导航 条 背景 的 设计 ， 接 下 来 束 是 导航 条 的 制作 。 新 建 “ 导 航 条 ”图 层 组 ， 将 前 景色 设置 为 R48、 


G104、B120， 选 择 “ 圆 角 炬 形 工具 ”， 设 置 绘 制 模式 为 “形状 ”，“ 半 径 ” 为 3 像素 ， 在 画面 中 间 单 击 并 拖 忠 女 标 ， 绘 制 圆 角 
算 形 。 


半径 : 3 像 喜 下边 埋 


为 了 让 绘制 的 导航 条 更 有 创意 ， 可 以 对 导航 条 进行 变形 。 选 择 “ 直 接 选 择 工 具 ”， 单 击 绘制 的 圆 角 算 形 ， 选 择 “ 添 加 销 操 工 
具 ”， 在 圆 角 算 形 右 侧 的 路 径 上 单 击 ， 添 加 一 个 路 径 钵 点 。 


选择 “转换 点 工具 ”， 将 鼠标 移 公 在 路 径 上 添加 的 销 点 位 置 ， 单 击 将 销 点 转换 为 直角 销 点 ， 然 后 用 “直接 选择 工具 ” 单 击 并 
癌 右 拖 擅 访 锁 点 ， 更 改 图 形 外 形 。 


反 巧 提示 : 选择 路 径 与 路 径 销 点 


用 “路 径 选 择 工 具 ” 可 以 选中 路 径 及 路 径 上 的 所 有 锚 点 ， 而 使 用 “直接 选择 工具 ”可 以 单独 选择 路 径 中 的 某 个 锚 点 。 


步骤 08 ”设置 多 个 图 层 样式 


这 里 还 需要 在 绘制 的 导航 条 中 添加 纹理 以 增强 质感 。 执 行 “图 层 > 图 层 样 式 > 和 斜面 和 浮雕 ”菜单 命令 ,打开 “图 层 样式 " 


话 框 ， 在 对 话 框 中 勾 选 “斜面 和 浮雕 ”“ 内 阴影 ”“ 投 影 ” 复 选 枉 ， 然 后 在 对 话 框 右 侧 为 勾 选 的 图 层 样式 设置 选项 。 


对 


样式 : 

方法 : 
深度 (D): 

方 句 : (®) 
大 小 (Z): 。 
软化 (F): C 


表明 ; 


角度 {N): 
: 
诸 半 等 高 线 : 


高 光 模 式 :| : 
不 透明 度 (0): 

阴 景 车 式 : | . 
天 委 明 度 (Cc): 


105 | 度 


可 使 用 全 局 光 (G6) 


15 度 


_| 消除 福 占 (L) 


内 阴影 


混合 模式 : | 正常 
不 透明 度 (0) 


角度 (A:( 4】 
路 齐 (D): < 


阳 塞 (0): < 


(SY 


混合 模式 : 
不 和 明度 (0): 


角度 (A): | | 
中 高 (Dj: 上 


扩展 (R): 上 
大 小 (9): 5 


步骤 09 设置 并 应 用 样式 效果 


继续 对 图 层 样 式 进行 设置 ， 勾 选 “ 颜 色 蔷 加 ” 复 选 框 ， 设 置 颜色 苹 加 选项 。 设 置 完 成 后 单 击 “确定 ”按钮 ， 应 用 样式 效果 。 


识 色 登 加 
训 色 


混合 模式 : | 正常 
不 透明 度 (0): 


步骤 10 ”使 用 “ 圆 角 矩形 工具 ”绘制 算 形 


添加 样式 后 ， 虽 然 图 形 看 起 来 更 有 立体 感 了 ， 但 是 感 党 立体 感 不 强 。 所 以 按 下 快捷 键 Ctrl+J， 复 制 “ 圆 角 算 形 ” 图 层 ， 创 


建 “ 圆 角 算 形 1 拷贝 ”图 层 。 


© 量 圆 角 拒 形 1 拷贝 


步骤 11 设置 多 个 图 层 样 式 


口 | 己 圆 前 矩形 1 


确保 “ 圆 角 起 形 1 拷 贝 ”图 层 为 选中 状态 ， 双 击 该 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 勾 选 “ 摘 边 ” “内 阴 
影 ” “投影 ”和 “颜色 苹 加 ” 复 选 框 ， 并 设置 对 应 的 样式 选项 ， 取 消 “ 和 斜面 和 浮雕 ”样式 的 勾 选 状态 。 


| 描 边 
结构 
大 小 (S): 
fn: | 内 WP > 
混合 模式 : | 颜色 加 腔 
不 透明 度 (0): ， 
| 要 Eh 


探寻 
结构 


混合 模式 : | 正片 亚 底 
十 透 明度 (0): 
角度 (A: | ” | |120 | 度 
2BS (DD): 后 
扩展 (R}: 
大小 (SF 5 


步骤 12 ”应 用 图 层 样式 并 复制 图 形 


设置 完成 后 ， 单 击 “ 确 定 ”按钮 ， 应 用 图 层 样式 ， 为 复制 图 形 添加 新 的 样式 效果 。 为 了 突出 应 用 样式 后 的 图 形 效果 ， 执 


内 阴影 

结构 
混合 模式 : | 正常 

不 委 明 度 (0): 
角度 (A): | ， ||90 | 度 
6(D): 上 
阻塞 (Cj: < 
大 小 (5j: 上 


颜色 于 加 
颜色 


滥 合 模式 : | 正常 
不 表明 度 (0): 


使 用 全 局 光 (6) 


行 “编辑 > 变换 > 缩放 ”菜单 命令 ,适当 缩 放 “ 圆 角 和 矩形 1 拷贝 ”图 层 中 国 角 和 矩形 的 大 小 、。 


步骤 13 ”复制 图 像 更 改 混合 模式 


为 了 迎合 牛仔 专卖 这 一 主题 ， 打 开 素 材 文 件 01jpg， 这 是 一 张 店铺 中 的 牛仔 裤 上 身 效 果 图 ， 把 这 张 图像 复 制 到 导航 条 上 方 ， 
导 到 “图 层 1” 图 层 ， 将 图 层 混 合 模式 设置 为 “ 滤 色 ”， “不 透明 硫 ” 设 置 为 625%， 然 后 执行 “编辑 > 变换 > 迎 时 针 旋 转 90 
”菜单 俏 令 ， 旋 转 图 像 。 


洒 


= 十 表明 度 : 65% 
iE: 转 中 四 填充 : 100% 


OO 了 吕 导航 条 
C 0 El 


步骤 14 载 入 并 复制 选区 内 的 图 像 


只 


由 于 此 处 只 需要 在 导航 条 上 晋 加 牛仔 布 纹理 ， 所 以 按 住 Ctr 键 不 放 ， 单 击 “ 圆 角 和 矩形 1” 图 层 缩 览 图 ， 载 入 选区 。 选 择 
层 1” 图 层 ， 单 击 “ 图 层 " 面板 中 的 “添加 图 层 蒙 版 ”按钮 ， 添 加 蒙 版 ， 隐 藏 多 余 的 图 像 。 


过 贺 角 拒 形 1 
名 曲线 1 


拒 形 1 


打开 素材 文件 02.jpg， 将 打开 的 图 像 复 制 到 导航 条 上 ， 得 到 “图 层 2” 图 层 ， 更 改 图 层 混合 模式 后 ， 复 制图 层 ， 调 整 位 置 ， 
使 牛仔 布 纹理 填 满 整个 导航 条 。 


一 不 ] 秃 明度: do0590 
sf 十 而 填充 ; 100% 
vi 二 山东 
“mn. ] 一 


一 一 一 


选择 “ 横 排 文字 工具 ”， 打开“ 字符 ”面板 ,为 了 方便 顾客 阅读 ， 设 置 导 航 文 字 字 体 为 较 工整 的 黑体 ， 然 后 在 导航 条 上 输入 
文字 。 输 入 后 双击 文字 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 设 置 “ 投 影 ”样式 ， 为 文字 添加 投影 效果 。 


报时 
结构 
混合 模式 : | 正片 又 底 加 


下 透明 度 [0): [20 |% 
负 度 (A): | 、 ) [120 | 度 “ 口 ] 使 用 全 局 光 


1 100% 


中 高 (D): 5 1 怪 素 
A0 襄 扩展 (R): |100 |% 
TTTITTrTT TTF 大 小 ( 遇 避 、 1 “| 偏 素 


Ne 
本 店 所 有 商品 。 首页 。 秋季 新 品 。 牛仔 裤 ” 养 牛 手册 。 “会 员 专 训 


步骤 17 ”添加 更 多 装饰 元 素 


使 用 图 形 绘 制 工具 在 导航 条 右 侧 绘制 图 形 ， 并 根据 画面 需要 添加 样式 ， 得 到 更 加 漂亮 的 导航 条 效果 。 


会 员 专 享 


本 店 所 有 商品 。 首页 “秋季 新 品 。 和 牛仔裤。 “其 牛 手册 


Sm 三立 ) 和 vs、 
实例 84 ”清新 明快 风格 的 导航 条 设计 

本 实例 是 为 童 沪 店 设 计 的 导 肌 条， 根据 店铺 销售 的 商品 的 特点 ， 在 设计 时 定义 为 清新 风格 ， 通 过 浅 色 背景 来 泻 染 轻柔 、 舒 适 
的 感 完 ， 导 航 条 主体 以 不 同 深浅 的 监 紫色 来 表现 出 层次 感 ， 明 快 的 色彩 让 图 像 更 符合 受众 群体 的 审美 。 


源 文件 随 书 资源 \ 源 文件 \10\ 清 新 明快 风格 的 导航 条 设计 .psd 


步 又 01 新 建文 件 填充 背景 
背景 进行 处 理 ， 设 置 前 景色 为 RR03、G210、 


启动 Photoshop 程 序 ， 新 建 一 个 空 晶 文件。 根据 导航 条 的 整体 风格 ， 先 对 
B220， 选 择 “ 和 矩形 工具 ”， 设 置 绘制 模式 为 “形状 ”， 沿 文件 边缘 单 击 并 拖 蝶 鼠标 ， 绘 制 与 画面 同等 大 小 的 算 形 。 


步骤 02 用 “渐变 工具 ”编辑 背景 


在 背景 中 填 苑 单一 颜色 未 免 显得 大 单调 ， 所 以 选择 “渐变 工具 ”， 设 置 前 景色 为 日 多， 在 “渐变 ” 拾 色 器 中 选择 “前 景色 到 
透明 渐变 ”， 勾 选 “ 反 向 ” 复 选 框 ,设置 “不 透明 度 ” 为 60%， 从 背景 中 间 同 外 拖 蝶 渐变 效果 。 


回国 国 峡 模 坏 : 正 吊 


步骤 03” 纵 制 多 列 选区 


选择 “单列 选 框 工具 ”， 单 击 选 项 栏 中 的 “添加 到 选区 ”按钮 ， 在 背景 上 连续 单 击 ， 绘 制 多 列 选 框 效 果 。 


选择 “单行 选 框 工具 ”， 单 击 选项 栏 中 的 “添加 到 选区 ”按钮 ， 在 育 景 上 连续 单 击 ， 绘 制 多 行 选 框 效 果 。 


步骤 05 ”为 选区 填充 颜色 


单 击 “ 图 层 ”面板 中 的 “创建 新 图 层 ”按钮 也有， 新 建 “图 层 1” 图 层 ， 设 置 前 景色 为 白色 ， 按 下 快捷 键 Alt+ Delete， 将 选 
区 填充 为 日 色 。 


步骤 06 使 用 “钢笔 工具 ”绘制 图 形 


经 过 上 一 步 操作 ， 完 成 了 导航 条 背景 的 制作 ， 接 着 开始 设计 导航 条 部 分 。 设 置 前 景色 为 R166、G171、B185， 选 择 “ 钢 笔 
工具 ”， 在 选项 栏 中 设置 工具 选项 ， 然 后 在 画面 左 侧 连续 单 击 ， 绘 制 不 规则 图 形 ， 并 人 在 “图 层 ” 面 板 中 生成 “形状 1” 图 层 。 


DOG: 
OB: 


六 |a6abb9 


步骤 07 复制 图 形 更 改 颜色 


为 了 使 绘制 的 图 形 呈 现 立 体 的 视 萝 效果 ， 按 下 快捷 键 Ctrl+J， 复 制图 形 ， 得 到 “形状 1 拷贝 ”图 层 。 双 击 图 层 缩 史 图， 将 图 
形 的 填充 颜色 更 改 为 R128、G139、B169。 


和 tr 有 2 碟 1 拷 风 
C | 了 形状 1 


步骤 08 使 用 “钢笔 工具 ”绘制 三 角形 


设置 前 景色 为 R84、G89、B106， 选 择 “ 钢 笔 工 具 ”， 在 选项 栏 中 设置 绘制 模式 为 “形状 ”， 在 画面 中 连续 单 击 ， 绘 制 不 规 
则 图 形 ， 并 在 “图 层 ” 面 板 中 生成 “形状 2” 图 层 。 


步骤 09 ”复制 图 形 调整 位 置 


同时 选中 “形状 1” 及 其 上 方 的 所 有 形状 图 层 ， 按 下 快捷 键 Ctrl+J， 复 制图 形 ， 执 行 “ 编 辑 > 变 换 > 水 平 翻转 ” 菜 单 命令 ,， 翻 
转 图 像 并 将 其 移 至 画面 的 男 一 侧 ， 得 到 对 称 的 图 形 效果 。 


步骤 10 ”使 用 “ 目 形 工具 ”绘制 算 形 


至 此 ,已 绘制 好 导航 条 的 两 出， 接 下 来 进行 导航 条 中 间 部 分 的 绘制 。 设 置 前 景色 为 R184、G189、B194， 选 择 “ 和 矩形 工 
具 ”， 设置 绘制 模式 为 “形状 ”， 在 图 像 中 单 击 并 拖 蝶 鼠标 ,绘制 矩 形 图 形 ， 在 “图 层 ” 面 板 中 生成 “矩形 2” 图 层 。 


步骤 11 复制 算 形 更 改 颜色 


为 了 使 导航 条 中 间 部 分 也 表现 立体 的 视觉 效果 ， 按 下 快捷 键 Ctrl+Jj， 复 制图 形 ， 得 到 “和 矩 形 2 拷 贝 ” 图 层 。 双 击 图 层 缩 览 


图 ， 将 图 形 的 填充 颜色 更 改 为 R166、G174、B213。 


步骤 12 绘制 线条 设置 描 边 效果 


设置 前 景色 为 日 色 ， 选 择 “ 钢 笔 工 具 ”， 在 选项 栏 中 设置 填充 为 “无 ”， 摘 边 颜 色 为 日 色 ， 摘 边 类 型 为 虚线 ， 按 住 shift 键 
不 放 ， 人 在 导航 条 顶端 连续 单 击 ， 绘 制 虚线 。 


步骤 13 ”复制 线条 移动 其 位 置 


上 一 步 在 导航 条 顶 痛 添加 了 虚线 ， 为 了 得 到 对 称 的 视 沉 效果 ， 按 下 快捷 键 Ctrl+J， 复制“ 形状 3” 图 层 ， 得 到 “形状 3 拷 
贝 ”图 层 ， 将 此 图 层 中 的 虚线 移 全 导航 条 扶 端 。 


步骤 14 使 用 “多 边 形 工具 ”绘制 图 形 


设置 前 景色 为 R177、G177、B179， 选 择 “多边 形 工具 ”， 人 在 选项 栏 中 设置 工具 选项 。 由 于 此 处 需要 星 形 效果 ， 所 以 单 
击 “ 几 何 体 选项 ”按钮 ， 在 展开 的 下 拉 列 表 中 多 选 “ 星 形 ” 复 选 框 ， 调 整 “ 缩 进 边 依 据 ”， 人 在 导航 条 左 侧 单 击 并 拖 灸 鼠标， 绘制 


包括 60 条 边 的 星 形 效果 。 


步骤 15 复制 多 边 形 调整 大 小 


为 了 让 绘制 的 星 形 显得 更 有 层次 感 ， 按 下 快捷 键 Ctrl+J， 复 制 “ 多 边 形 1” 图 层 ， 得 到 “多 边 形 1 找 贝 ”图 层 。 按 下 快捷 键 
Ctrl+T， 打 开 上 自由 变换 编辑 框 ， 适 当 缩 小 复制 的 星 形 图 形 。 


步骤 16 更 改 复制 的 图 形 颜色 


如 果 所 有 的 星 形 头 色 都 一 样 ， 那 么 图 形 的 层次 感 束 不 会 很 突出 。 所 以 选择 “直接 选择 工具 ”， 选 中 复制 的 星 形 图 形 ， 单 击 选 
项 栏 中 “ 摘 边 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 下 拉 列 表 中 单 击 “ 拾 色 器 ”图 标 ， 在 展开 的 对 话 框 中 设置 填充 颜色 为 R234、G237、 
B244， 更 改 摘 边 颜色 。 


EL 
人 
次 


职 开 使 用 且 裔 色 


J 国 本 国 国 国 国 
TT 


_ | | 国 国 


步骤 17 复制 图 层 更 改 颜色 


按 下 快捷 键 Ctrl+J， 复 制图 形 ， 得 人 到“ 多边形 1 拷 贝 2” 图 层 。 确 保 “ 多 边 形 工具 ”为 选中 状态 ， 在 展开 的 选项 栏 中 对 星 形 填 
充 颜 色 进行 更 改 ， 得 到 更 多 的 星 形 蔷 加 效果 。 


步骤 18 使 用 “多 边 形 工具 ”绘制 五 角 星 


绘制 较 大 的 星 形 图 案 后 ， 为 了 让 导航 条 更 加 漂亮 。 可 以 再 绘制 一 些 稍 小 的 星 形 。 设 置 前 景色 为 日 色 ， 选 择 “ 多 边 形 工具 ”， 
单 击 “ 几 何 体 选 项 ”按钮 ， 在 展开 的 下 拉 列 表 中 将 “ 缩 进 边 依据 ”设置 为 ?0%， 确 定 边 数 为 9， 绘制 五 角 星 效果 。 


步骤 19 ”复制 五 角形 图 案 


按 下 快捷 键 Ctrl+J， 复 制图 形 ， 得 到 “多 边 形 3 拷贝 ”图 层 。 选 择 “移动 工具 ”， 把 该 图 层 中 的 五 角形 图 形 移 至 导航 条 的 另 
一 人 出， 得 到 对 称 的 画面 效果 。 


近 巧 提示 : 多 种 万 法 复制 图 形 


要 复制 图 形 ， 可 以 选中 图 形 所 对 应 的 图 层 ， 将 其 拖 幼 至 “创建 新 图 层 ” 按钮 上 ， 复 制图 层 中 的 图 形 ; 也 可 以 按 下 快捷 键 
Cttl+J， 快 速 复制 图 层 中 的 图 形 。 


选择 “ 直 排 文字 工具 ”， 在 较 大 的 星 形 中 辐 单 击 并 输入 文字 “ 潮 童 生活 馆 ”。 由 于 是 为 童 委 店 设计 的 导航 条 ， 所 以 打开 “ 字 
符 ” 面 板 ， 将 文字 字体 设置 为 较为 活泼 的 迷你 简 少 儿 字 体 ， 颜 色 设 置 为 粉 紫色 ，。 


巡 你 商 少 儿 R..… 


潮 童 生活 馆 


TI 了 ITITTrT T, TT 


步骤 21 ”选择 文字 更 改 大 小 


为 了 突出 文字 的 主 次 关系 ， 选 择 “ 横 排 文字 工具 ”， 在 文字 “生活 馆 ” 上 单 击 并 拖 蝶 鼠标 ， 选 中 文字 ,打开 “ 字 符 ” 面 板 ， 
把 字号 缩小 为 5 点 。 


迷你 简 卡 通 R.… 


步骤 22 输入 更 多 文字 并 添加 “投影 ”样式 


选择 “ 横 排 文字 工具 ”， 人 在 已 输入 的 文字 下 输入 英文 “Hello Baby” ， 输 入 后 根据 画面 的 整体 效果 ， 对 文字 的 字体 、 颜 色 
进行 调整 。 执 行 “图 层 > 图 层 样 式 > 投 影 ” 菜 单 命令 ,打开 “图 层 样式 ”对 话 框 ， 在 对 话 框 中 设置 选项 ， 为 文字 添加 投影 。 


扩展 (R): 一 - 
大 小 (5 一 一 一 像素 


步骤 23 ”绘制 委 饰 图 形 


为 了 让 上 、 下 两 部 分 的 文字 联系 更 崇 密 ， 可 以 在 文字 中 间 添 加 图 形 加 以 修饰 。 选 择 “多边 形 工 具 ”， 务 人 在 文字 中 间 单 击 并 拖 
蝶 鼠 标 ， 绘 制 一 个 白色 的 五 角形 图 形 ， 然 后 选择 “直线 工具 ”， 设 置 绘制 模式 为 “形状 ”，“ 粗 细 ” 为 2 像素 ， 在 星 形 中 间 绘 制 
一 条 日 色 的 线条 。 


步骤 24 使 用 “ 横 排 文字 工具 ”输入 导航 分 类 


经 过 前 面 的 操作 ， 完 成 了 导航 条 中 店铺 名 及 广告 语 的 设置 ， 接 下 来 束 是 商品 分 类 信息 的 输入 。 选 择 “ 横 排 文 字 工具 ”， 人 在 导 
航 条 上 单 击 并 输入 导航 文字 ， 输 入 后 打开 “字符 ”面板 ,为 了 让 文字 与 画面 的 整体 风格 更 统一 ， 选 择 较 为 可 爱 的 迷你 简 卡 通 字 
体 。 


所 有 分 类 首页 201s 秋 .上 新 ”店铺 活动 麻 系 公主 
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步骤 25 设置 “投影 ”样式 


输入 后 为 了 让 文字 表现 出 立体 的 视 完 效果 ,双击 文字 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 多 选 “ 投 影 ” 复 选 框 ， 然 
后 设置 样式 选项 。 设 置 完成 后 单 击 “确定 ”按钮 ， 应 用 样式 ， 完 成 本 实例 的 制作 。 
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实例 85 ”突显 立体 感 的 导航 条 设计 


本 实例 是 为 某 家 居 用 品 店 设 计 的 导 般 条， 将 丝 市 运用 到 导航 条 的 设计 中 增加 了 时 尚 感 ， 反 复 卷 起 的 市 子 给 画面 增加 了 动态 
感 ， 通 过 动静 结合 的 表现 万 式 吸引 眼球 。 同 时 将 店铺 红包 放置 到 导航 条 中 ， 利 用 店铺 红包 优惠 的 万 式 提高 店铺 点 击 率 。 


TNH 渤 央 站 礼 pp 


总 宙 8 硅 餐 优惠 执 销 单 


素 材 随 书 资源 \ 素 材 10\03.psd 
源 文件 ” 随 书 资源 \ 源 文件 \10\ 突 显 立 体感 的 导航 条 设计 .psd 


步骤 01 为 背景 填充 产 色 


启动 Photoshop 程 序 ， 新 建文 件 。 设 置 前 景色 为 R220、G217、B198， 选 择 “矩形 工具 ”， 沿 文件 边缘 单 击 并 拖 电 鼠 标 ， 
绘制 一 个 与 文档 同等 大 小 的 起 形 。 


步骤 02 ”使 用 “ 圆 角 起 形 工具 ”绘制 图 形 


此 实例 是 为 天 狂 店 铺 店庆 设计 的 导航 条 ， 为 了 突出 店庆 和 氛围， 用 鲜艳 的 红色 作为 导 舰 条 表 景 颜色 。 选 择 “ 圆 角 算 形 工具 ”， 
在 选项 栏 中 设置 绘制 模式 为 “形状 ”， 填 充 颜 色 为 R40、G40、B38，“ 半 径 ” 为 10 像 素 ， 在 画面 中 间 位 置 单 击 并 拖 擅 鼠标 ， 绘 
制 圆 角 和 矩形 效果 。 


习 填充 :| J 搞 为 : 本 3 点 


步骤 03 ”使 用 “删除 销 点 工具 ”删除 路 径 销 点 


为 了 使 导 舰 条 更 加 新 颗 ， 可 对 图 形 进行 变形 。 选 择 “ 删 除 锁 点 工具 ”， 将 鼠标 移 全 圆 角 算 形 左下 角 的 锁 点 位 置 ， 单 击 鼠 标 ， 
弹出 提示 对 话 框 ， 单 击 对 语 框 中 的 “是 ”按钮 ， 删 除 路 径 锁 点 。 


0 此 控 作 会 将 实时 形 病 转变 为 这 规 路 径 。 圣 百 维 综 ?| 


选择 “转换 点 工具 ”， 将 鼠标 移 公 要 转换 的 路 径 销 点 处 ， 单 击 鼠 标 ， 将 销 点 转换 为 直线 销 后 。 


选择 “直接 选择 工具 ”， 单 击 转换 后 的 路 径 钵 点 ， 将 其 选中 ， 然 后 按 下 键盘 中 的 雹 方 同 键 ， 移 动 锁 氮 位 置 。 


继续 使 用 同样 的 操作 方法 ， 对 圆 角 抱 形 右 下 角 进 行 变 形 ， 将 其 更 改 为 直角 起 形 效果 。 


步骤 07 复制 图 形 更 改 产 色 


按 下 快捷 键 Ctrl+J， 复 制图 层 ， 得 到 “ 圆 角 窍 形 1 拷贝 ”图 层 。 这 里 想 要 制作 堵 加 的 图 形 效果 ， 因 此 按 下 快捷 键 Ctrl+T， 打 
开 目 由 变换 编辑 框 ， 将 鼠标 移 全 编辑 框 边 绿 ， 对 图 形 进行 轻微 的 缩小 操作 。 为 了 区 别 图 形 的 前 后 天 系 ， 单 击 “ 圆 角 窍 形 1 找 
贝 ”图 层 缩 金 图， 将 图 形 填充 颜色 更 改 为 R40、G40、B38。 


步骤 08 设置 并 应 用 样式 效果 


调整 图 形 颜色 后 ， 还 需要 为 图 形 设置 纹理 。 双 击 “ 圆 角 算 形 1 拷 由 ”图 层 ， 打 开 “ 图 层 样式 ”对 话 框 ， 在 对 话 框 中 勾 选 “ 斜 
面 和 浮 雕 ” 复 选 框 ， 设 置 “ 斜 面 和 浮雕 ”样式 ;再 勾 选 “纹理 ” 复 选 枉 ， 设 置 “三 直 线 1” 样 式 。 设 置 后 单 击 “ 确 定 ” 按 钮 ， 应 
用 样式 。 
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步骤 09 ”复制 图 形 并 进行 变形 


为 了 使 绘制 的 导航 条 呈现 更 自然 的 立体 效果 ， 按 下 快捷 键 Ctrl+J， 复 制图 形 并 将 其 填充 颜色 更 改 为 R203、G203、B203。 选 
择 “直接 选择 工具 ”， 单 击 图 形 ， 选 中 图 形 上 面 的 钵 点 ， 结 合 “ 添 加 刹 点 工具 ”对 图 形 进行 变形 ， 得 到 更 有 创意 的 图 形 效果 。 


步骤 10 设置 “纹理 ”样式 


复制 图 形 时 ， 图 形 上 的 纹理 也 会 随 之 复制 。 为 了 使 图 形 上 的 纹理 更 丰富 ， 执 行 “ 图 层 > 图 层 样式 > 斜面 和 浮 膨 ” 菜 单 命令 ， 
打开 “图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 更 改 “ 纹 理 ” 选 项 ， 单 击 “ 确 定 ” 按 钮 ， 应 用 样式 。 


步骤 11 使 用 “相形 选 框 工具 ”绘制 选区 


选择 “ 算 形 选 框 工具 ”， 在 深 灰 色 和 矩形 下 半 部 分 单 击 并 拖 灸 鼠标， 绘制 矩 形 选区 。 


反 巧 提示 : 创建 连续 的 选区 效果 


辑 图 像 时 ， 如 果 需 要 创建 连续 的 多 个 矩形 选区 ， 可 以 单 击 “矩形 选 框 工 具 ” 选 项 栏 中 的 “添加 到 选区 ”按钮 国 ， 然 后 在 图 像 
中 连续 创建 选区 。 


步骤 12 ”反选 选区 添加 图 层 蒙 版 


执行 “选择 > 反选 ”菜单 命令 ,反选 选区 。 单 击 “ 圆 角 和 矩形 1” 图 层 ， 单 击 “ 图 层 ” 面 板 中 的 “添加 图 层 蒙 版 ”按钮 ， 添 加 
蒙 版 ， 隐 藏 图 形 。 
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步骤 13 ”使 用 “矩形 工具 ”绘制 红色 矩形 


设置 前 景色 为 R1595、G13、B3， 选 择 “ 窍 形 工具 ”， 在 选项 栏 中 设置 绘制 模式 为 “形状 ”， 填 充 颜色 为 前 景色 ， 在 灰色 算 
形 中 间 单 击 并 拖 擅 鼠标 ， 绘 制 红 色 起 形 。 


步骤 14 设置 “渐变 蔷 加 ”样式 
绘制 图 形 后 ， 为 了 让 图 形 表 现 出 立体 感 ， 双 击 图 层 ， 打开“ 图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 多 选 “渐变 蔷 加 ” 复 选 框 , 设 


置 “ 渐 变 赤 加 ”样式 选项 。 设 置 后 单 击 “确定 ”按钮 ， 应 用 样式 效果 。 
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步骤 15 绘制 更 多 图 形 


继续 使 用 同样 的 万 法 ， 结 合 图 形 绘 制 工 具 和 图 层 样 式 ， 在 导航 条 上 绘制 更 多 的 图 形 效 果 。 


步骤 16 ”复制 图 像 更 改 图 层 混合 模式 
为 了 获得 更 多 顾客 的 关注 ， 可 以 在 导航 条 中 添加 红包 。 打 开 素 材 文 件 03.psd， 将 图 像 移 到 多 边 形 图 层 下 方 ， 按 下 快捷 键 


Ctrl+J」， 复 制 红包 图 像 ， 调 整 图 层 混 合 模式 ， 增 强 颜 色 。 


线性 加 深 = 不 杰 明 度 : 62% = 
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选择 “ 横 排 文字 工具 ”， 在 红包 旁边 输入 文字 “ 进 店 有 礼 ”。 输 入 后 打开 “字符 ”面板 ， 为 了 突出 这 部 分 文字 信息 ， 将 文字 
字体 设置 为 较 粗 的 迷你 简 少 儿 字 体 。 
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步骤 18 使 用 “直线 工具 ”绘制 线条 


继续 使 用 “ 横 排 文字 工具 ”在 导航 条 上 完成 更 多 导航 文字 的 输入 。 输 入 后 选择 “直线 工具 ”， 设置 “粗细 ”为 2 像素 ， 在 导 
航 信息 中 间 绘 制 白色 的 线条 ; 按 下 快捷 键 Ctrl+J， 复 制 多 个 线条 图 形 ， 将 文字 分 隔 开 来 。 


混搭 AAA 现 
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步骤 19 创建 图 层 共 版 设置 浙 隐 效果 


最 后 为 线条 图 层 添 加 蒙 版 ,选择 “ 渐 变 工具 ”， 在 “渐变 ” 拾 色 器 中 单 击 “ 黑 ， 日 渐变 ”， 从 线条 上 万 往 下 拖 蝶 渐变 ,创建 
渐 隐 的 线条 效果 。 
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实例 86 “清爽 活泼 风格 的 导航 条 设计 


本 实例 是 为 一 家 宠物 用 品 店 设计 的 导航 条 ， 画 面 通过 非 单 微妙 的 色调 差异 喜 造 出 精致 、 细 腻 的 效果 ， 人 在 画面 中 添加 和 草地、 化 
朱 、 蝴 蝶 等 元 素 更 是 增强 了 整个 图 像 的 活力 。 为 了 迎合 主题 ， 设 计时 还 将 卡通 动物 店铺 徽标 置 于 画面 中 辣 位 置 ， 让 主题 显得 更 为 
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素 材 随 书 资源 \ 素 材 \10\04.psd 一 06.psd 


源 文 件 随 书 资源 \ 源 文件 \10\ 清 殉 活 泼 风 格 的 导航 条 设计 .psd 


设计 分 析 


. 设计 要 点 01: 导航 条 选择 饱和 度 较 低 的 深 灰 绿 ， 为 顾客 营造 出 一 种 更 为 舒适 的 色彩 感受 ， 将 浅 绿 色 的 植物 添加 到 导航 条 


上 ， 为 画面 增添 生机 。 
` 设计 要 点 02: 视觉 中 心 位 置 的 正六 边 形 图 形 ， 填 充 白 色 到 灰色 的 渐变 ， 增 强 了 层次 感 ， 突 出 了 中 间 的 店铺 徽标 。 
` 设计 要 点 03: 导航 条 中 的 文字 采用 中 、 英 文 对 比 的 设计 方式 ， 增 强 了 文字 的 可 读 性 。 

配色 方案 


整体 的 配色 以 明度 较 低 的 绿色 为 主 ， 让 画面 不 会 因 色 彩 太 强 而 产生 视觉 刺激 感 ， 同 时 在 绿 色 的 画面 中 适当 加 入 红色 、 栖 色 ， 
弱化 了 画面 的 单调 感 ， 使 画面 显得 更 有 生机 。 


版 式 分 析 


本 实例 在 布局 的 设计 中 ， 使 用 了 十 字 交 叉 来 划分 版 面 ， 给 人 市 来 更 稳定 、 蹈 实 的 感觉 。 位 于 十 字 线 上 的 内 容 为 主要 内 容 ， 而 
交叉 位 置 是 整个 设计 的 中 心 ， 通 过 规则 的 正六 边 形 来 表现 ， 将 店铺 币 标 放置 其 中 ， 加 深 了 品牌 印象 。 


技术 要 点 
使用“ 圆 角 佐 形 工具 ”绘制 导航 条 ， 复 制图 形 ， 更 改 颜色 ， 添 加 投影 效果 。 
“ 用 “移动 工具 ”把 草地 、 风 车 图 像 拖 入 导航 条 上 方 ， 结 合 调整 命令 对 颜色 进行 调整 ， 统 一 画面 颜色 。 


- 使 用 “ 横 排 文字 工具 ”输入 导航 条 信息 ; 运用 “多 边 形 工具 ”绘制 图 形 ， 添 加 店铺 徽标 。 


实例 87 ” 木 弘 质感 风格 的 导 朋 条 设计 


设计 导航 条 时 可 以 充分 与 店铺 的 整体 风格 及 销售 的 商品 相 结 合 ， 本 实例 是 为 一 家 销售 木 地 板 的 店铺 设计 的 导航 条 。 为 了 突出 
所 销售 的 商品 ， 把 拍摄 的 地 板 照 片 革 加 于 导航 条 上 ， 通 过 添加 图 层 样 式 增强 其 质感 ， 与 店铺 风格 更 为 统一 。 


全 部 商品 分 类 。 首页 有 惊喜 ”清仓 特价 。 强化 复合 ”实木 复合 


束 材 随 书 资源 \ 素 材 \10\07.jpg 
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设计 分 析 


. 设计 要 点 01: 由 于 此 实例 是 为 林地 板 店铺 设计 的 导航 条 ， 因 此 在 设计 时 选择 地 板 图 像 作为 背景 ， 通 过 明暗 变化 让 导航 条 中 
的 元 素 突显 出 来 。 


* 设计 要 点 02: 在 导航 条 中 添加 搜索 功能 ， 方 便 用 户 根据 个 人 需求 快速 找到 符合 要 求 的 商品 。 


:设计 要 点 03: 用 规整 的 黑体 字 表 现 商品 的 分 类 信息 ， 并 利用 较 深 一 些 的 矩形 将 选择 与 未 选择 分 类 时 的 效果 展示 出 来 。 


Wh 


配色 方案 


木 地 板 给 人 目 然 温馨 、 高 贵 典 雅 的 感受 ， 为 了 让 这 种 感受 呈现 出 来 ， 在 设计 中 采用 无 彩色 作为 背景 色 ， 让 画面 中 间 部 分 的 导 
航 条 显得 更 加 醒目 、 突 出 ， 在 导航 条 部 分 用 红色 与 黄色 搭配 ， 为 画面 营造 出 更 温暖 的 氛围 ， 更 容易 获得 顾客 的 情感 共鸣 。 


版 式 分 析 


本 实例 在 布局 时 使 用 规则 的 矩形 作为 导航 条 的 背景 ， 导 航 条 左 侧 添 加 了 红色 丝 市 作为 装饰 ， 为 了 让 画面 显得 更 稳定 ， 在 导 般 
侧 加 入 了 搜索 栏 ， 增 强 了 导航 条 的 实用 性 和 版 面 的 独特 性 。 


技术 要 扣 
“ 使 用 “矩形 工具 ”绘制 黑色 渐变 背景 。 使 用 “添加 杂 色 ” 滤 镜 在 背景 中 添加 杂 色 ， 增 强 其 纹理 感 。 


` 使 用 “ 圆 角 和 珑 形 工具 绘制 出 导航 条 外 形 ， 将 木 地 板 图 像 添 加 至 导航 条 ， 通 过 创建 图 层 蒙 版 拼合 图 像 ， 让 图 像 融入 到 导航 


Ts 


- 运用 图 层 样式 为 导航 条 添加 样式 ， 增 强 其 立体 感 。 使 用 “ 横 排 文字 工具 在 导航 条 上 方 输入 商品 分 类 导航 信息 。 


实例 88 “小 清新 风格 的 导航 条 设计 


本 实例 是 为 淘宝 水 果 店 铺设 计 的 导航 条 ， 在 设计 时 为 了 突出 水 果 绿 色 、 新 鲜 、 健 康 的 特点 ， 选 用 绿色 作为 导航 条 主 色 ， 
不 同 深 浅 的 绿色 营造 出 时 尚 、 清 新 的 视 完 感受 。 在 导航 条 文字 的 处 理 上 ， 利 用 规整 的 字体 让 商品 的 分 类 显得 更 为 清晰 。 


本 店 所 有 商品 每 周 特价 水 来 海南 水 果 专 区 顺丰 快速 专区 水 来 拼盘 


所 有 商品 
I 心头 猴 挑 
软 籽 石 机 
越南 芒果 
凯特 芒果 
泰国 百 香 果 
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设计 分 析 
设计 要 点 01: 根据 店 销 中 销售 商品 的 特点 ， 在 导航 条 上 填充 绿色 渐变 ， 传 递 新 鲜 、 健 康 的 色彩 感受 。 
设计 要 点 02: 在 渐变 条 上 方 添加 叶片 加 以 装饰 ， 让 简单 的 导航 条 显得 更 加 精致 


` 设计 要 点 03: 在 导航 条 中 用 不 同 的 闫 色 显示 单 击 后 的 效果 ， 方 便 顾 客 直观 地 感受 导航 条 中 的 选项 在 实际 运用 中 被 选中 后 的 


配色 方案 


对 于 大 部 分 顾客 来 涡 ， 选 择 水 果 时 更 注重 其 是 人 否 新 鲜 、 是 否 有 品质 保证 。 为 了 打消 顾客 的 这 些 疑 虑 ， 在 设计 本 实例 时 用 了 者 
琴 绿 作为 导航 条 的 主 色 ， 清 澈 的 色调 给 人 新 鲜 水 嫩 的 印象 ， 让 人 目 然而 然 地 联想 到 新 鲜 可 口 的 水 果 ， 刺 激 顾客 的 购买 欲 。 


版 式 分 析 


鉴于 导航 条 的 设计 尺寸 和 功能 ， 本 实例 在 设置 布局 时 遵循 了 水 平 排列 的 布局 方式 ， 将 文字 合理 而 整 错 地 安排 在 导航 条 上 ， 为 
了 避免 版 式 上 的 单一 ， 还 在 每 个 导航 分 区 间 用 线条 进行 六 饰 ， 增 加 画面 的 韵味 。 同 时 制作 了 导航 菜单 ， 通 过 从 上 到 下 的 编排 方 
式 ， 增 强 了 导航 条 中 文字 的 视觉 导向 性 。 


技术 要 扣 


使用“ 圆 角 和 给 形 工 具 ” 绘 制导 航 条 图 形 ， 结 合 “ 图 层 样 式 ” 中 的 样式 选项 为 绘制 的 图 形 添加 样式 ， 并 将 绿叶 图 像 添 加 到 导 
航 条 左 侧 ， 丰 富 导 航 条 效果 。 


. 使 用 “钢笔 工具 ”和 “矩形 工具 ”绘制 导航 菜单 ， 展 示 单 击 导航 选项 后 的 效果 。 


. 用 文字 工具 在 导航 条 中 输入 横向 和 纵向 排列 的 文字 ， 完 善 导 航 条 。 


实例 89 “手机 端 店 招 与 导航 设计 


本 实例 是 手机 端 店 招 、 导 航 条 的 设计 与 效果 应 用 。 相 对 于 PC 端 来 讲 ， 手 机 端的 店 招 与 导航 设计 更 为 简单 。 在 设计 的 过 程 
中 ， 通 过 使 用 规则 的 图 形 对 画面 进行 划分 ， 确 定 店 招 和 导航 的 位 置 ， 然 后 在 画面 中 对 店 招 和 导航 进行 更 细致 的 设置 ， 并 添加 导航 
恩 和 委 饰 图 形 ， 得 到 简单 而 有 设计 感 的 画面 。 
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源 文 件 随 书 人 资源 \ 源 文件 \10\ 手 机 疡 店 招 与 导 舰 设计 .psd 


配色 方案 


本 实例 为 手机 端 店铺 首页 效果 ， 在 配色 时 使 用 了 系统 默认 的 楼 色 ， 相 对 于 其 他 颜色 来 说 ， 栖 色 更 能 带 给 人 亲切 和 温暖 的 感 
觉 ， 能 够 拉 近 顾客 与 店铺 之 间 的 距离 。 为 了 缓和 楼 色 在 视觉 上 的 强烈 冲击 力 ， 画 面 中 的 文字 以 黑色 来 表现 ， 让 人 感觉 协调 而 舍 


设计 分 析 


` 设计 要 点 01: 由 于 手机 屏幕 尺寸 有 限 ， 所 以 手机 端 寻 航 条 中 的 分 类 选项 分 为 上 、 下 两 个 部 分 ， 画 面 更 显 对 称 、 紧 


2% 
注 
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` 设计 要 点 02: 在 设计 的 过 程 中 ， 为 了 统一 画面 的 风格 ， 在 导航 菜单 穷 边 都 绘制 了 闫 色相 同 的 图 形 加 以 补充 说 明 。 


:设计 要 点 03: 为 了 使 用 户 能 够 在 店铺 中 快速 找到 符合 要 求 的 商品 ， 在 店 招 上 还 设计 了 搜索 栏 ， 对 商品 做 了 更 详细 的 分 类 。 


版 式 分 析 


本 实例 中 的 店 招 与 导航 条 采用 由 上 往 下 的 排列 万 式 进行 设计 ， 为 了 让 画面 显得 简洁 而 不 凌乱 ， 在 店 招 区 域 使 用 照片 作为 背 
景 ， 而 在 设计 导航 条 时 ， 则 以 水 平 排列 的 方式 进行 划分 ， 将 文字 从 左 至 右 依次 添加 a 到 导航 条 上 ， 增 强 了 导航 条 在 手机 端的 实用 效 
果 。 为 了 避免 导航 条 显得 过 于 单调 ， 在 文字 旁边 还 添加 线条 和 图 标 加 以 修饰 。 


技术 要 扣 


` 使 用 “ 憩 形 工具 在 画面 中 绘制 不 同 大 小 的 天 形 ， 对 整个 画面 进行 简单 的 划分 


“ 使 用 “钢笔 工具 绘制 分 类 小 图 标 ， 并 在 图 标 淮 边 用 “ 横 排 文字 工具 输入 对 应 的 产品 分 类 信息 。 
` 在 画面 中 添加 商品 照片 ， 通 过 创建 剪贴 蒙 版 拼合 图 像 ， 展 示 完 成 的 画面 效果 。 
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See MOre 


网 店 中 的 欢迎 模块 和 促销 广告 是 对 店铺 最 新 热卖 商品 、 促 销 活动 等 信息 进行 的 展示 ， 通 常 位 于 店铺 导航 条 的 下 万 ， 比 导航 
条 、 店 招 所 占 的 区 域 都 要 大 ， 也 是 顾客 进入 店铺 后 最 容易 被 吸引 的 区 域 ， 其 设计 效果 的 好 与 坏 将 直接 影响 店铺 的 点 击 率 和 商品 销 


量 。 因 此 ， 如 何 利用 文字 与 商品 相 结合 、 将 其 卖点 更 好 地 表现 出 来 ， 是 设计 时 必须 要 考虑 的 问题 。 此 外 ， 在 设计 欢迎 模块 和 促销 
广告 时 ， 还 需要 考虑 整个 店铺 的 疼 修 风格 ， 这 样 才 能 让 设计 出 来 的 图 像 与 网 店 整体 版 面 和 谐 统 一 。 


90 古典 风格 的 饰品 促销 展示 设计 
91 剃 须 刀 广 告 商品 展示 设计 

92 男 鞋 新 品 预 售 欢迎 模块 设计 

93 ”唯美 风格 的 美 收 商 品 欢迎 模块 设计 
94 ”品牌 女装 店 周年 庆 活动 广告 设计 
95 ”精品 女 式 手提 包 促销 广告 设计 
96 母亲 节 欢 迎 模块 设计 


97” 聚 划算 活动 欢迎 模块 设计 


实例 90 ”古典 风格 的 饰品 促销 展示 设计 


本 实例 是 为 一 蒜 民族 风 的 手链 设计 的 两 品 促销 展示 图 ， 将 扣 报 的 手链 图 像 与 绘制 的 背景 融合 在 一 起 ， 通 过 左 文 右 图 的 版 面 构 
成 方式 ， 使 得 整个 画面 既 简 洁 又 不 失 设计 感 。 同 时 ， 在 色彩 的 处 理 上 ， 利 用 暗 红色 和 深 监 色 搭配 组 合 ， 更 能 表现 出 复古 的 艺术 和 氛 
围 。 


纯 纯 条 纯 采 木 焕 ， 
天 于 条 天 用 质 发 : 
人 然 整 紧 独 

过 无 根 密 有 

站 大 油 卡 

2 无 料 测 力 


泰 材 随 书 资源 \ 素 材 \11\01.jpg， 烟 雾 .abr 


源 文 件 随 书 资 源 \ 源 文件 \11\ 古 典 风格 的 饰品 促销 展示 设计 .psd 


启动 Photoshop 程 序 ， 执 行 “ 文 件 > 新 建 ” 菜 单 命令 ， 由 于 网 店 中 促销 图 的 宽度 限制 为 1260 像 素 ， 因 此 新 建 一 个 宽度 为 
1260 人 和 像素、 高度 为 600 像 素 的 文件 。 新 建文 件 后 ,创建 “背景 ”图 层 组 ， 用 “ 算 形 工具 ”绘制 一 个 颜色 为 R8、G13、B19 的 矩形 
作为 背景 。 


为 了 使 绘制 的 起 形 具有 一 定 的 纹理 质感 ， 双 击 图 层 ， 打 开 “ 图 层 样 式 ” 对 语 框 ， 在 对 话 框 中 设置 “斜面 和 浮雕 ”中 的 “级 
理 ” 样 式 。 设 置 后 单 击 “ 确 定 ” 按 钮 ， 应 用 样式 。 


| | 


局 兴 模式 : | 滤 双 
不 透明 度 (0): “ 
阴影 情 式 :| 正片 亚 插 
不 考 明 度 (C): 全 


为 了 让 纹理 更 加 突出 ， 把 “下 形 1” 图 层 复制 ， 创 建 “ 窍 形 1 拷贝 ”图 层 。 执 行 “ 图 层 > 智能 对 象 > 转换 为 智能 对 象 ” 茉 单 合 
令 ， 把 图 层 转 换 为 智能 对 象 图 层 。 执 行 “ 滤 说 > 杂 色 > 添 加 杂 色 ”菜单 命令 ,在 弹出 的 对 话 框 中 设置 选项 ， 单 击 “ 确 定 ” 按 钮 ， 


为 图 像 添加 采 色 效果 。 
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经 过 上 一 步 操作 ， 可 以 看 到 画面 虽然 添加 了 杂 色 ,但 也 因此 变 亮 了 。 所 以 创建 “曲线 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 
中 单 击 并 向 下 拖 蝶 曲线 ， 降 低 图 像 的 亮度 。 


经 过 前 面 的 设计 ， 完 成 了 背景 图 像 的 处 理 ， 接 着 束 是 商品 的 添 加 。 创 建 “ 和 商品 ”图 层 组 ， 打 开 素 材 文 件 01.jpg， 选 择 “ 移 动 
工具 ”， 把 手链 图 像 拖 岛 至 “商品 ”图 层 组 下 ， 得 到 “图 层 1” 图 层 ， 根 据 版 面 需 要 调整 其 大 小 。 


为 了 让 拖 入 画面 的 商品 与 背景 损 合 在 一 起 ， 为 “图 层 1” 添 加 图 层 蒙 版 ， 选 择 “ 淘 变 工具 ”， 从 商品 中 间 位 置 向 外 拖 钨 黑 日 
径 向 渐变 ， 创 建 渐 隐 的 画面 效果 。 


nn 


设置 渐变 后 ， 友 现 图 像 中 的 部 分 商品 也 被 隐藏 了 了。 选择 “画笔 工具 ”， 先 将 前 景色 设置 为 日 色 ， 在 手链 上 单 击 并 涂抹 ， 将 隐 
藏 的 珠子 显示 出 来 ; 册 把 前 景色 设置 为 黑色 ， 人 在 背景 处 蛙 击 并 涂抹 ,将 多 余 的 背景 隐藏 ， 使 画面 变 得 更 干净 。 


步骤 08 载 入 选区 复制 手链 图 像 


为 了 让 手链 与 绘制 的 背景 融合 更 加 自然， 需要 对 手链 图 像 进行 复制 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 1 拷贝 ”图 层 蒙 版 ， 载 入 
选区 。 选 中 画面 中 的 手链 部 分 ， 单 击 “ 图 层 1 拷 贝 ” 图 层 缩 史 图， 按 下 快捷 键 Ctrl+J， 复 制 手 链 图 像 ， 得 到 “图 层 2” 图 层 。 


品 
图 后 2 
名 图 层 1 拷贝 


步骤 09 ”调整 图 层 顺 序 并 模糊 图 像 


将 复制 的 “图 层 2” 图 层 中 的 手链 图 像 移 全 “图 层 1” 图 层 下 方 ， 由 于 图 像 边 缘 看 起 来 不 太 干 学 ， 因 此 把 图 层 兹 合 模式 设置 
为 “正片 嗜 抵 ”， “不 透明 度 ” 降 至 ?0%， 再 设置 “局 斯 模糊 ” 滤 镜 模糊 图 像 ， 使 图 像 边缘 与 育 景 融合 更 为 目 然 。 
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步骤 10 设置 “色相 /饱和 度 ” 变 换 色 彩 


为 了 突出 红色 的 手链 ， 可 以 将 其 他 的 颜色 去 除 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 1” 图 层 缩 此 图 ， 载 入 选区 。 创 建 “色相 /饱和 
度 2” 调 整 图 层 ， 选 择 “红色 ”， 然 后 把 “饱和 度 ” 设 置 为 -100。 设 置 后 帮 现 手链 上 黄色 的 饱和 度 也 降低 了 ， 所 以 用 黑色 画笔 涂 


抹 黄 色 的 珠子 部 分 ， 还 原 其 颜色 。 


色相 /饱和 度 sO. jd se ; 
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色相 : 


饱和 度 : 


步骤 11 降低 “饱和 度 ” 让 画面 更 干净 


按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 1” 图 层 蒙 版 缩 虹 图 ， 载 入 选区 。 创 建 “ 色 阶 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 向 右 拖 蝶 


— 
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黑色 滑 块 ， 使 手链 阴影 部 分 变 得 更 瞳 ， 再 同 左 拖 蝶 日 色 背 块 ， 使 高 光 部 分 变 得 更 亮 。 


会 色相 /饱和 .. 
DD 图 层 1 


步骤 12 载 入 选区 调整 背景 部 分 颜色 


按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 1” 图 层 蒙 版 缩 虎 图 
域 , 创建 “色彩 平衡 1" 
色 ” 滑 块 ， 加 深 青色 。 


， 载 入 选区 。 执 行 “ 选 择 > 反 选 ” 荣 单 售 令 ， 选 择 除 手链 外 的 所 有 育 景区 


上 月 时 
调整 图 层 。 这 里 想 要 把 背景 设置 为 深蓝 色 ， 因 此 在 “属性 ”面板 中 选择 “阴影 ”， 疝 左 拖 忠 “ 青 色 、 红 


: Ay 


训 加 他 


色 叶 :了 骨 有 


步骤 13 ”设置 “ 色 阶 ”降低 手链 的 亮度 


由 于 拍摄 照片 时 光线 略 强 ， 使 得 图 像 中 手链 颜色 偏 膏 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 1 拷 贝 ”图 层 蒙 版 


缩 览 图 ， 载 入 选区 。 
新 建 “ 色 相 / 饱 和 度 1” 调 整 图 层 ， 选 择 “ 红 色 " 


， 设 置 颜色 的 “饱和 度 ” 和 “明度 ”。 


步骤 14 ” 纵 制 选 慌 效果 


为 了 突出 主体 对 象 ， 选 择 “ 粉 形 工 具 ”， 在 选项 栏 中 调整 工具 选项 ， 沿 整个 画面 边缘 单 击 并 拖 蝶 鼠标 ， 绘 制 选区 。 执 行 “ 选 
择 > 反 选 ” 菜 蛙 命令 ,反选 图 像 ， 选 择 图 像 的 边 绿 部 分 。 


技巧 提示 : 快速 载 入 选区 


Photoshop 中 ， 如 果 要 载 入 选区 对 图 像 局 部 加 以 调整 ， 可 按 住 Cttl 键 不 放 ， 单 击 “ 图 层 ” 面 板 中 的 图 层 或 图 层 蒙 版 缩 览 图 。 


步骤 15 为 选区 填充 


汉 
中 


经 过 上 一 步 操作 ， 选 择 了 图 像 的 边 绿 区 域 。 这 里 需要 突出 画面 的 中 间 部 分 ， 所 以 创建 “颜色 填充 1” 调 整 图 层 ， 将 填充 色 设 
置 为 黑色 ， 加 深 图 像 边 绿 部 分 。 创 建 颜色 填充 后 友 现 右 侧 的 手链 也 变 瞳 了 ， 因 此 用 黑色 画笔 在 手链 位 置 涂抹 ， 隐 藏 位 于 图 像 上 的 
填充 颜色 ，。 
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选择 “ 直 排 文字 工具 ”， 打开“ 字符 ”面板 。 由 于 这 里 要 输入 的 是 商品 介绍 文字 ， 所 以 选择 较 规 则 的 方正 大 标 宋 体 ， 字 体 大 
小 设置 为 较 小 的 6 点 ， 将 颜色 设置 为 与 育 景 反 差 较 大 的 浅 色 ， 然 后 在 图 像 志 侧 单 击 并 输入 文字 。 


字符 

方正 大 标 末 _6..， 也 
TI 6 名 和 + 全 8 局 
VA 0 100 
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步骤 17 ”在 文字 和 旁边 绘制 线条 效果 
为 了 表现 更 为 尝 凑 的 画面 效果 ,选择 “直线 工具 ”， 在 选项 栏 中 调整 工具 选项 ， 然 后 在 每 列 文字 之 间 都 添加 一 条 垃 直 的 日 色 


党 强 源 汉江 
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步骤 18 统一 调整 线条 的 不 透明 度 


经 过 上 一 步 操作 ， 友 现 画 面 中 的 线条 太 抢 眼 了 。 按 住 Ctrl 键 不 放 ， 依 次 单 击 线 条 所 在 图 层 ， 将 所 有 线条 图 层 都 选中 ， 并 把 这 
些 图 层 的 “不 透明 度 ” 设 置 为 10%， 降 低 其 不 透明 度 。 


加 斩 有 有 工 瑟 四 
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“中 次 填充 : 100% 


纯 纯 颗 纯 和 采 木 煤 ， 
最 天 用 质 发 : 
。 性 然 束 紧 独 

有 无 要 室 : 有 

二 补 大 油 购 

2 无 料 润 力 


=a 


EE 


| 
| 
| 


蜡 妃 ” 
” 制 
曾 
组 
打 


生 


OQ O000000 


继续 使 用 相同 的 方法 ， 用 “ 直 排 文字 工具 ”在 画面 中 输入 更 多 的 文字 。 根 据 商 品 的 风格 ， 把 主体 文字 “小 叶 紫 柱 ” 的 字体 设 


置 为 行书 ， 然 后 选中 “小 ”文字 图 层 ， 冯 击 图 层 ， 打开“ 图 层 样 式 ” 对 话 框 ， 勾 选 “投影 ” 复 选 框 ， 设 置 投影 选项 ， 为 文字 添加 
投影 效果 。 
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列 各 明度 TD): 59 
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使 用 同样 的 方法 ,为 “ 叶 ”“ 紫 ”“ 檀 ”3 个 字 也 设置 相同 的 投影 效果 。 经 过 设置 ， 友 现 男 面 中 的 文字 显得 有 点 单 调 。 为 了 
襄 画 面 ， 载 入 下 载 的 “烟雾 ” 笔 刷 ， 将 前 景色 设置 为 蓝 色 ， 然 后 在 主体 文字 下 万 单 击 ， 绘 制 烟雾 图 案 。 


纯 纯 旱 
天 于 盯 
然 工 保 
材 制 | 直 


步骤 21 添加 更 多 烟雾 图 案 


经 过 上 一 步 操 作 ， 友 现 绘制 的 烟雾 边 绿 太 规整 有 与 背景 没有 衔接 起 来 。 为 了 让 绘制 的 烟雾 与 背景 融合 更 自然， 添加 图 层 蒙 
版 ， 用 黑色 画笔 适当 涂抹 其 边 绿 位 置 ， 隐 藏 图 像 。 最 后 将 绘制 的 烟雾 复制 ， 调 整 大 小 和 位 置 ， 得 到 更 丰 语 的 画面 效果 。 
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实例 91 剃 须 刀 广 告 商品 展示 设计 


本 实例 是 为 某 品牌 剃 须 刀 设 计 的 国庆 节 促 销 广 告 ， 将 尸 外 游玩 的 照片 添加 至 画面 作为 背景 ， 使 用 灰色 的 渐变 算 形 对 背景 的 颜 
色 进 行 修饰 ， 通 过 对 着 须 刀 的 颜色 调整 ， 统 一 画面 的 整体 风格 ,利用 蓝 色 的 文字 和 图 形 补 充 活 动 信息 ， 使 整个 画面 色彩 协调 ， 重 
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素 材 随 书 资源 \ 素 材 \11\02.jpg 一 04.jpg 
源 文 件 随 书 资 源 \ 源 文件 \11\ 闲 须 刀 广告 商品 展示 设计 .psd 


步骤 01 复制 背景 图 像 并 进行 变形 


启动 Photoshop 程 序 ， 新 建 一 个 文档 ， 将 素材 文件 02.jpg 添 加 到 文件 中 ， 并 根据 版 面 的 大 小 调整 图 像 的 尺寸 ， 使 其 铺 满 整 
个 画布 。 为 了 使 背景 图 案 显 得 更 有 创意 ， 应 用 “变形 ”命令 对 图 像 进行 适当 的 变形 。 


步骤 02 绘制 图 形 决定 主 色 调 


选择 “和 矩形 工具 ”， 人 在 画面 中 沿 图 像 边 绿 绘制 矩形 ， 绘 制 后 填充 渐变 颜色 ， 增 强 男 面 的 影 调 层次 。 接 下 来 通过 江 加 图 层 蒙 
版 ， 把 中 间 位 置 隐藏 起 来 ， 用 于 后 面 添加 剃 须 刀 图 像 。 
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不 项 明度 : 


步骤 03 ”设置 图 形 绘 制 选 项 


经 过 上 一 步 操作 ， 友 现 画面 中 间 建 筑 育 景 图 像 的 颜色 显得 很 乱 。 因 此 选用 “钢笔 工具 ”在 画面 中 辐 位 置 连续 单 击 ， 绘 制 多 边 
形 图 形 。 绘 制 后 为 了 统一 画面 风格 ， 在 选项 栏 中 对 多 边 形 图 形 的 填 宛 颜色 进行 调整 。 
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步骤 04 ”查看 渐变 的 灰色 多 边 形 


参数 ， 此 时 通过 图 像 窗口 查看 绘制 的 图 形 ， 画 面 的 整体 色调 调整 为 灰色 ，。 
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步骤 02? ”复制 并 抠 出 商品 


完成 育 景 设 计 后 就 是 促销 商品 的 添加 ， 打 开 素 材 文件 03jpg， 拖 擅 全 新 建 的 文件 中 。 为 了 让 画面 显得 更 干净 ， 用 “钢笔 工 
具 ” 沿 剃 须 刀 图 像 绘制 工作 路 径 ， 绘 制 后 将 路 径 转换 为 选区 。 单 击 “ 图 层 ” 面 板 中 的 “添加 图 层 蒙 版 ”按钮 ， 隐 藏 多 余 的 背景 。 


由 于 党 到 光线 影响 ， 调 整 后 剃 须 刀 的 边缘 部 分 显得 太 暗 了 ， 剃 须 刀 感觉 是 “ 浮 ” 在 画面 中 。 为 了 让 商品 与 背景 融合 更 加 目 
然 ， 执行“ 图 层 > 图 层 样 式 > 内 友 光 ” 菜 蛙 命令 ,打开 “图 层 样式 ”对 话 框 ， 在 对 话 框 中 设置 “内 友 光 ”选项 ， 提 亮 刹 须 刀 边缘 
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步骤 08 ” 盖 印 并 复制 图 像 


如 果 画 面 中 只 有 一 个 剃 须 刀 商 


[| 


品 ， 未 免 显 得 


太 过 于 单调 。 因 此 选中 剃 须 刀 所 在 的 “图 层 2” 图 层 及 上 方 的 所 有 调整 图 层 ， 按 
下 快捷 键 Ctrl+Alt+E， 盖 印 选中 图 层 
展示 效果 。 


得 到 “ 色 阶 1 (合并 ) ”图 层 。 复 制图 层 ， 并 调整 图 层 中 的 剃 须 刀 位 置 ， 得 到 更 多 的 商品 
内 容光 
结构 
混合 模式 : | 小 色 
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0 % 
加 I70 像 圳 


步 又 06 ”调整 商品 的 影 调 


观察 图 像 友 现 制 须 岂 边 绿 受 环境 


影响 变 为 了 红色 ， 因 此 ， 载 入 剃 须 刀 选区 ， 创 建 “色相 /饱和 度 1” 调 整 图 层 ， 把 “饱和 
度 ” 滑 块 向 右 拖 奥 至 -100 位 置 ， 让 商品 的 颜色 变 得 更 干净 。 接 着 创建 “ 色 阶 1” 调 整 图 层 ， 向 右 拖 自 黑色 和 灰色 滑 块 ， 降 低 阴影 
和 高 光 的 亮度 ， 可 以 看 到 更 有 层次 感 的 剃 须 刀 效果 。 


BB 1 
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步骤 09 ”通过 选择 并 抠 出 图 像 添加 更 多 商品 


为 了 强调 促销 两 品 的 种 类 非常 丰富 ， 使 用 同样 的 方法 ， 把 素材 文件 04.jpg 也 添加 到 画面 中 ， 并 调整 抠 出 的 图 像 的 颜色 ， 制 作 
出 更 多 妓 加 商品 效果 。 


步骤 10 ”设置 选项 绘制 彩带 图 像 


经 过 前 面 的 操作 ， 完 成 了 促销 广告 中 商品 的 添加 ， 接 下 来 融 是 文案 及 妆 饰 元 素 的 设计 。 为 了 让 画面 显得 更 动感 ， 用 “钢笔 工 
具 ” 在 最 石 侧 的 剃 须 刀 旁边 绘制 图 形 ， 并 结合 选项 栏 设 置 填 死 颜色 ， 得 到 监 色 的 丝 市 效果 。 


Pr- 


不 透明 度 : 


一 光 刷 pb] a 41 
缩放 : 100 = % WY 与 图 层 对 齐 


步骤 11 用 “投影 ”样式 使 画面 更 立体 


如 果 想 将 丝 市 效果 融入 到 画面 中 ， 则 可 为 其 添加 投影 。 执 行 “ 图 层 > 图 层 样 式 > 投 影 ” 菜 单 命令 ,打开 “图 层 样式 ”对 话 
框 ， 在 对 话 框 中 根据 和 版 面 情况 对 “投影 ”样式 进行 设置 。 完 成 后 单 击 “确定 ”按钮 ， 应 用 样式 ， 添 加 投影 效果 。 
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要 在 绘制 的 丝 市 中 添加 文字 ， 可 选择 “ 横 排 文字 工具 ”， 在 “字符 ”面板 中 设置 文字 属性 ， 设 置 后 如 果 和 直接 单 击 并 输入 文 
字 ， 则 文字 会 以 水 平 万 式 显示 。 这 里 想 要 文字 也 与 丝 市 的 运动 轨迹 相近 ， 所 以 用 “钢笔 工具 ”在 丝带 中 间 位 置 绘制 路 径 ， 然 后 在 
路 径 上 输入 文字 ， 创 建 路 径 文字 效果 。 


字 导 


Adobe 里 体 St.，. 


T7229 


A 0 


选用 “ 横 排 文字 工具 ”在 画面 中 间 位 置 输入 主体 文字 ， 输 入 后 为 了 突出 主体 文字 部 分 ， 将 字体 设置 为 较 粗 的 方正 大 黑 ， 并 将 
字号 设置 为 380 点 ， 字 体 颜 色 设置 为 与 丝 市 颜色 一 致 的 监 色 ， 以 统一 画面 的 色调 。 
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没有 立体 感 。 所 以 应 用 “图 层 样 式 ” 中 的 “和 斜面 和 浮雕 ”样式 为 输入 的 文字 添加 内 斜面 浮雕 效 
置 样式 ， 为 文字 添加 投影 。 
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尔 ， 完 成 本 实例 的 制作 。 


时 间 : 10 月 1 日 一 10 月 7 日 


OC 


实例 92 男 鞋 新品 预 售 欢迎 模块 设计 


本 实例 是 为 菜品 牌 运动 鞋 设计 的 首页 欢迎 模块 。 在 制作 的 过 程 中 ， 为 了 突出 该 品牌 鞋子 的 特色 ， 用 了 运动 的 卡通 人 物 加 以 修 
饰 ， 同 时 在 商品 的 表现 上 ， 通 过 对 鞋子 的 颜色 进行 调整 ， 为 顾客 提供 更 多 颜色 方面 的 选择 。 


| | 三 
有 吨 驻 新 品 


下 室 匀 新品 必 布 江 ， 给 你 不 一 样 舒适 的 感 党 
zh @ 枪 评 和 Ei 高 端 与 优 下 
FREE HEART FREE ACTI10 


素 材 随 书 资 源 \ 素 材 \11\05.jpg，06、07.psd，08.jpg 


随 书 资 源 \ 源 文件 \11\ 男 鞋 新 品 预 售 欢 迎 模块 


濠 文件 设计 .psd 


步骤 01 添加 背景 并 模糊 图 像 


启动 Photoshop 程 序 ， 新 建 一 个 文件 ， 把 素材 文件 05.jpg 置 入 到 文件 中 。 为 了 突出 后 面 要 添加 的 鞋子 部 分 ， 这 里 先 执 
行 “ 滤 镜 > 模 糊 > 高 斯 模糊 ”菜单 命令 ， 应 用 “高 斯 模糊 ” 滤 镜 ,对 背景 进行 简 蛙 的 模糊 处 理 。 


息 100% 入 be 
站 和 (Rj: 0。 | 入 帘 ODO 名 雍 汇 秆 


步骤 02 用 “色彩 平衡 ”加 强 红 、 黄 色 


为 了 让 背景 的 颜色 与 时 尚 的 运动 鞋 更 加 匹配 ， 对 背景 的 颜色 进行 调整 。 创建“ 色彩 平衡 1 ”调整 图 层 ， 打 开 “ 属 性 ”面板 ， 
在 面板 中 分 别 对 “阴影 ” “中 间 调 ”和 “高光 ” 头 色 进行 设置 ， 增 强 背 景 中 的 红 、 黄 色调 。 


经 过 上 一 步 操作 ， 虽 然 颜 色 强 度 得 到 了 提高 ， 但 是 感 针 色彩 还 是 不 够 艳 琢 。 因 此 创建 “曲线 1” 调 整 图 层 ， 打开 “属性 ” 面 
板 ， 选 择 “ 预 设 ” 中 的 “有 反 冲 ”曲线 ， 制 作 反 转 负 冲 效 果 。 设 置 后 将 “不 透明 度 ”适当 降低 ， 让 画面 色彩 变换 更 加 自然 。 


a 9 曲线 


jm: 尽 中 (RGB) E SW 外 舌 明度 : 64% 
- 圭 RGB 3E JE : 转 A + ‘~ 填充 : 100% 


为 了 使 背景 的 层次 更 加 突出 ,将 “曲线 1” 调 整 图 层 复制 ， 并 把 “不 透明 度 ” 设 置 为 默认 的 100%。 双 击 “ 曲 线 1 拷 贝 ” 图 层 
缩 此 图 ， 打 开 “ 属 性” 面板， 选择 “ 强 对 比 度 (RGB) ”选项 ， 增 强 对 比 效果 。 


男 口 晓 


3 而 名: 强 对 比 度 {RGB) 
E 。 RGB 


经 过 前 面 的 操作 ， 完 成 了 背景 的 制作 ， 接 下 来 就 是 商品 的 处 理 。 在 添加 商品 前 ， 先 要 确定 商品 授 放 位 置 ， 用 “和 炬 形 工具 ”在 
画面 中 心 位 置 绘制 晋 加 的 起 形 ， 用 于 后 面 添加 畦 子 图 像 。 


步骤 06 添加 卡通 人 物 形象 


新 建 “ 潮 男 ”图 层 组 ， 把 素材 文件 06.psd、07.psd 复 制 到 文件 中 。 根 据 版 面 需 要 ， 适 当 调 整 人 物 的 大 小 和 位 置 ， 将 它们 安 
排 在 矩形 的 两 人 出 ,得 到 对 称 版 面 布局 。 


(ee 章 轨 2 
BE 尖 | 由 1 


步骤 07 复制 并 抠 取 运动 鞋 


接 下 来 添加 主 商 品 。 将 素材 文件 08.jpg 复 制 到 画面 中 ， 按 下 快捷 键 Ctrl+T， 打 开 上 自由 变换 编辑 框 ， 把 鞋子 图 像 等 比例 缩小 。 
缩小 图 像 后 为 鞋子 添加 图 层 蒙 版 ， 将 多 余 的 鞋子 和 背景 图 像 隐 蕊 。 


步骤 08 调整 运动 畦 大 小 和 位 置 


前 面 为 了 便于 抠 图 ， 没 有 将 鞋子 缩 至 太 小 。 经 过 上 一 步 操作 ， 已 完成 鞋子 的 抠 取 工作 ， 所 以 为 了 使 整个 版 面 更 加 协调 ， 执 
行 “ 变 换 ” 命 令 对 鞋子 进行 缩小 和 水 平 翻转 操作 ， 完 成 后 对 图 像 应 用 蒙 版 效果 。 


步骤 09 ”复制 商品 创建 并 排 的 画面 效果 


为 了 让 顾客 知道 此 天 鞋子 有 多 种 颜色 可 以 选择 ， 接 下 来 把 鞋子 图 像 复制 。 通 过 连续 按 下 快捷 键 Ctrl+J， 复 制 3 只 鞋子 ， 然 后 
把 复制 的 鞋子 图 像 分 别 向 两 侧 拖 咏 ， 调 整 其 位 置 ， 得 到 并 排 的 运动 鞋 效果 。 


T 品 鞋子 拷贝 4 加 


LE 鞋子 拷 风 3 
ES 鞋子 拷 风 2 


ES 畦 子 拷贝 
中 中 对 竺 子 


步骤 10 用 “色相 /饱和 度 ” 调 整 鞋 子 颜色 


下 面 乞 对 最 右 侧 鞋子 的 颜色 进行 调整 ， 按 住 Ctrl 键 不 放 ， 单 击 “ 鞋 子 拷贝 ”图 层 ， 载 入 选区 ， 即 可 选中 鞋子 图 像 。 创 建 “ 色 


相 / 饱 和 度 1” 调 整 图 层 , 将 “色相 ” 滑 块 向 左 拖 忠 ， 增 强 绿色 ; 再 向 左 拖 忠 “饱和 度 ” 滑 块 ， 降 低 饱 和 度 ， 设 置 后 可 以 看 到 监 
的 鞋子 变 为 了 淡 青 色 。 


图 EJ 色相 /饱和 和 度 


) 鞋子 拷贝 
鞋子 


步骤 11 将 鞋子 调整 为 红色 效果 


接 下 来 调整 第 二 只 鞋子 的 颜色 ， 按 住 Ctrl 键 不 放 ， 单 击 “ 鞋 子 拷贝 2” 图 层 ， 载 入 选区 ， 选 中 鞋子 。 创 建 “ 色 相 / 饱 和 度 


2” 调 整 图 层 , 将 “色相 ” 滑 块 同 左 拖 忠 ， 增 强 红 色 ; 再 向 右 拖 忠 “饱和 度 ” 滑 块 ， 提 高 头 色 鲜艳 度 ， 设 置 后 可 以 看 到 蓝 色 的 鞋 
子 变 为 了 鲜艳 的 红色 ，。 


四 鞋子 拷 风 
有 本 pp 


em 鞋子 拷 风 
te 竺 了 


™, 


反 巧 提示 : 选区 的 快速 载 入 


用 调整 图 层 对 商品 进行 调 色 时 ， 如 果 需 要 对 同一 区 域 应 用 多 个 调整 图 层 ， 可 以 按 住 Ctrl 键 不 放 ， 单 击 对 应 的 图 层 缩 览 图 ， 载 
入 图 像 选区 。 


步骤 12 输入 主体 文字 


最 后 调整 第 一 只 鞋子 的 颜色 ， 按 住 Ctrl 键 不 放 ， 单 击 “ 鞋 子 拷 贝 3” 图 层 ， 载 入 选区 ， 选 中 鞋子 。 创 建 “ 色 相 / 饱 和 度 3” 调 
整 图 层 ， 将“ 色相” 背 块 向 左 拖 蝶 至 黄 绿色 位 置 ， 再 向 右 拖 拒 “饱和 度 ” 疹 块 ， 提 高 颜色 鲜艳 度 ， 设 置 后 可 以 看 到 蓝 色 的 鞋子 变 
为 了 清新 的 果 绿 色 。 


鞋子 拷贝 3 
溉 色相 /中 和民 2 


驻 子 拷 风 2 


步骤 13 ”绘制 图 形 用 于 添加 阴影 


为 了 让 运动 鞋 呈现 立体 的 视 锅 效果 ， 还 需要 为 其 添加 目 然 的 阴影 。 将 前 景色 设置 为 R178、G178、B178， 使 用 “钢笔 工 
”在 畦 子 下 方 绘制 灰色 的 三 角形 图 形 。 


步骤 14 模糊 图 像 让 阴影 更 瘟 真 


执行 “ 滤 镜 > 模糊 > 高 斯 模糊 ”菜单 命令 ， 打开 “高 斯 模糊 ”对 话 杠 ， 在 对 话 框 中 根据 画面 整体 效果 设置 “半径 ”选项 ， 模 
糊 图 像 ， 使 绘制 的 图 形 形 成 目 然 的 阴影 ， 再 复制 阴影 图 像 ， 分 别 移 到 另外 3 只 鞋子 下 方 。 此 时 可 以 看 到 画面 中 的 鞋子 呈现 更 自然 
的 立体 感 。 
舍 ， 形 杖 4 拷贝 3 
曲 形 杖 4 拷贝 2 
| 昨 形 杖 4 拷贝 
遇 形 杖 4 


™ 


反 巧 提示 : 创建 智能 滤 镜 


用 滤 镜 编辑 图 像 时 ， 为 了 便于 随时 调整 滤 镜 参数 ， 可 以 先 执行 ”图 层 > 智 能 对 象 > 转 换 为 智能 对 象 ” 菜单 命令 ， 把 图 层 转 换 
为 智能 图 层 ， 然 后 对 图 层 应 用 智能 滤 镜 。 


步骤 15 将 鞋子 设置 为 果 绿 色 效 果 


为 了 让 顾客 了 解 更 多 的 信息 ， 需 要 在 画面 中 添加 文案 。 选 择 “ 横 排 文 字 工 具 ”， 打 开 “ 字 符 ” 面 板 ， 这 里 要 输入 主体 文字 ， 
因此 为 文字 设置 较 大 的 字号 并 选择 较 粗 的 字体 ， 在 鞋子 上 方 的 留 日 位 置 单 击 并 输入 文字 。 


正 综艺 简体 .,， 
”164.87 点 
An 
南 : 日 吃 


1T i00% 
A2 0 占 


步骤 16 添加 更 多 文字 效果 


为 了 让 促销 文字 之 间 的 层次 更 加 清晰 ， 需 要 企画 面 中 输入 更 多 的 文字 并 为 其 设置 不 同 的 字体 和 颜色 。 选 择 “ 横 排 文 字 工 
具 ”， 输 入 所 需 的 文字 ， 根 据 需要 调整 文字 的 大 小 、 颜 色 等 ， 输 入 完成 后 在 图 像 窗 口中 可 以 看 到 编辑 的 效果 。 


x 烛 小 or 
吕 


让 -一 Co 折 你 不 一 样 是 挝 的 四 
与 { 于 ， 时 站 工 上 
= TEA 十 [是 


步骤 17 绘制 图 形 突出 文字 


为 了 突出 画面 中 的 部 分 文字 信息 ， 可 以 添加 一 些 简 单 的 图 形 加 以 修饰 。 移 把 前 景色 设置 为 较 鲜艳 的 红色 ， 然 后 在 文字 “ 抢 
鲜 ” 下方 单 击 并 拖 忠 鼠标 ， 绘 制 圆 角 和 矩形 。 绘 制 后 应 用 “图 层 样 式 ”， 为 文字 添加 投影 效果 。 


操 影 
贡 构 


汽 癌 槛 元 : | 下 片 委 夸 | 思 时 | 
下 透明 了 (0]: 一 一 |75 |% 


贞 度 从: 人 ) [20 | 度 [| 全 用 全 yt (6) 


中 吕 {D): 酉 | 3 直 索 
扩展 1R | | % 
大 小 (3; 下 [5 分 京 


A 


步骤 18 完成 更 多 图 案 的 绘制 


继续 使 用 同样 的 方法 ， 在 图 像 中 添加 图 形 ， 得 到 更 丰富 的 画面 效果 。 全 此 ， 已 完成 本 实例 的 制作 。 


4 有 ,GE 
男 哇 新 品 


a ' 

# 时 和 一 一 一 一 一 - 
人 省 需 汇 ， 同 作 不 一 样 虾 通 的 葬 同 
旬 CGIEEE9》 于 自由 与 随 性， 高 六 与 忧 瑟 ， 寻 着 至 上 
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实例 93 ”唯美 风格 的 美 站 商品 欢迎 模块 设计 


本 实例 是 为 女性 品牌 化 妆 品 首页 制作 的 欢迎 模块 ， 利 用 简单 的 淡 蓝 色 水 伦 背 景 来 突显 商品 的 功能 特征 ， 同 时 采用 左 图 右 文 的 
表现 方式 ， 使 画面 中 要 突出 展示 的 洁面 商品 更 加 醒目 ， 而 清新 的 色调 搭配 也 更 符合 女性 的 审美 特征 ， 更 容易 获得 顾客 的 青睐 。 


Water p%Wwer 


素 材 随 书 资 源 \ 素 材 \11\09、10.jpg 
源 文 件 随 书 资源 \ 源 文件 \11\ 唯 美 风格 的 美 妆 商品 欢迎 模块 设计 .psd 


步骤 01 新 建文 件 拖 入 新 背景 


局 动 Photoshop 程 序 ， 新 建 一 个 文档 ， 把 素材 文件 09.jpg 添 加 到 文件 中 作为 背景 。 


用 “色彩 平衡 ”命令 调整 图 像 颜色 时 ， 默 认 情 况 下 会 匀 选 “保留 明度 复 选 框 ， 此 时 调整 图 像 颜色 时 将 保持 原 图 像 的 明暗 不 
发 生 改 变 。 若 取消 勾 选 ， 则 应 用 选项 调整 颜色 时 ， 图 像 的 明暗 也 会 随 之 发 生变 化 。 
观察 图 像 感 金 图像 中 的 蓝 色 太 深 7 了 ， 


显得 不 够 唯美 ， 因 此 需要 对 颜色 进行 调整 。 创 建 “ 色 相 / 饱 和 度 1” 调 整 图 层 ， 打 开 “ 属 
性 ”面板 。 这 里 想 要 削弱 蓝 色 ， 因 此 可 以 选择 “ 


青色 ”选项 ， 疝 右 拖 忠 “色相 ” 滑 块 ， 增 加 青色 ， 表 向 左 拖 忠 “饱和 度 ” 背 块 ， 
降低 颜色 饱和 度 。 


“色彩 平衡 1” 调 整 图 层 ,， 打开“ 属性 ”面板 ， 选 择 默 认 的 “中 间 调 ”， 辣 右 拖 岛 “青色 、 红 色 ” 滑 块 ， 同 左 拖 岛 “ 黄 
色 、 蓝 色 ” 滑 块 ， 调 整 颜色 百分比 。 


步骤 04 ”调整 背景 的 “自然 饱和 度 ” 


平衡 图 像 色 彩 后 ， 友 现 背 景 头 色 太 鲜 格 了 ， 容 易 前 弱 主 体 。 所 以 创建 “上 自然 饱和 度 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 
同 左 拖 息 “ 目 然 饱和 度 ” 滑 块 ， 降 低 颜 色 鲜 艳 度 。 


re 


步骤 05 设置 “曲线 ” 提 亮 偏 暗 的 图 像 


创建 “曲线 1” 调 整 图 层 ,， 打开 “属性 ”面板 。 因 为 要 表现 唯美 的 画面 效果 ， 所 以 在 曲线 上 单 击 并 向 上 拖 忠 ， 以 调整 图 像 的 
亮度 ， 使 画面 变 得 更 加 明亮 。 


步骤 06 ”继续 使 用 “曲线 ”调整 层次 


经 过 上 一 步 操 作 ， 可 以 看 到 画面 虽然 变 亮 了， 但 是 上 半 部 分 的 亮度 还 是 不 够 。 因 此 创建 “曲线 2” 调 整 图 层 , 打开 “ 属 
性 ”面板 ， 在 面板 中 再 次 单 击 并 向 上 拖 蝶 曲线 ， 进 一 步 提 亮 图 像 。 由 于 这 里 只 需要 提 亮 上 半 部 分 ， 所 以 单 击 “ 曲 线 2” 图 层 蒙 
版 ,选择 “渐变 工具 ”， 从 图 像 下 方 往 上 拖 蝶 黑 日 渐变， 隐藏 下 半 部 分 的 曲线 调整 。 


步骤 07 绘制 圆 形 定 位 商品 


经 过 前 面 的 操作 ， 完 成 了 背景 的 设计 ， 接 下 来 需要 湛 加 化 妆 品 图 像 。 在 添加 前 ， 先 用 “椭圆 工 具 ” 在 图 像 左 侧 绘 制 一 个 日 色 


的 圆 形 ， 用 于 确定 化 妆 品 的 位 置 ， 同 时 起 到 突出 商品 的 作用 。 


Be 


不 要 明度 : 50% 7 


填充 :100% 三 = 


步骤 08 ”复制 图 像 添加 化 妆 品 图 像 


把 素材 文件 10.jpg 复 制 到 画面 中 ， 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 ， 缩 小 图 像 ， 将 其 置 于 圆 形 的 中 间 位 置 。 接 下 来 
添加 图 层 蒙 版 ， 把 化 妆 品 后 方 的 育 景 隐藏 ， 使 商品 融入 到 育 景 中 。 


步骤 09 设置 “曲线 ”修复 较 蜡 的 商品 图 像 


观察 图 像 友 现 ， 为 了 防止 商品 出 现 曝 ;过 度 的 情况 ， 在 担 摄 时 降低 了 曝光 度 ， 导 致 图 像 看 起 来 很 蜡 ， 这 与 本 实例 的 风格 不 统 
一 。 载 入 化 妆 品 选区 ,创建 “曲线 3” 调 整 图 层 ， 打开“ 属性 ”面板 。 由 于 这 里 需要 提高 图 像 亮 度 ， 所 以 单 击 并 向 上 拖 蝶 曲线 。 


为 了 进一步 提高 商品 的 亮度 ,创建 “ 色 阶 1” 调 整 图 层 ， 单 击 并 向 右 拖 碟 黑色 滑 块 ， 降 低 阴影 部 分 的 亮度 ， 再 同 右 拖 蝶 灰色 
滑 块 ， 提 高 中 间 调 部 分 的 亮度 。 设 置 后 可 以 看 到 画面 中 的 化 妆 品 变 得 明亮 起 来 ， 画 面 给 人 的 感 狗 也 更 为 干净 。 
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RGB 
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为 了 统一 画面 风格 ， 还 需要 对 化 妆 品 中 部 分 信息 的 颜色 进行 调整 。 按 住 Ctrl 键 不 放 ， 单 击 “ 洁 面 产品 ”图 层 ， 载 入 化 妆 品 选 
区 。 创 建 “ 颜 色 填 充 1” 调 整 图 层 ， 设 置 填 充 色 为 R15、G182、B204， 设 置 后 将 图 层 混合 模式 更 改 为 “色相 ”， 再 用 黑色 画笔 


涂抹 不 需要 调整 的 部 分 ， 控 制 颜色 变换 的 区 域 。 


:100% 


100%6 


步骤 12” 关 印 图 层 设置 商 品 的 倒影 效果 


为 了 让 商品 呈现 立体 的 视 帝 效 果 ， 还 需要 为 图 像 添 加 目 然 的 倒影 。 按 住 Ctrl 键 不 放 ， 单 击 “ 语 面 产品 ”图 层 及 上 万 的 所 有 调 
整 图 层 ， 按 下 快捷 键 Ctrl+Alt+E， 苹 印 选 中 图 层 ， 得 到 “颜色 填充 1 (合并 ) ”图 层 。 执 行 “ 编 辑 > 变 换 > 尼 和 直 翻 转 ” 菜 单 命 
令 ， 翻 转 图 像 ， 添 加 蒙 版 ,用 “渐变 工具 ”编辑 蒙 版 ， 设 置 倒影 效果 。 


8 


1 F FE i LL 
本 一 


步骤 13 用 “ 横 排 文字 工具 ”输入 文字 


完成 商品 的 添加 后 ， 接 下 来 进行 文字 的 添加 。 选 择 “ 横 排 文 字 工 具 ”， 在 图 像 中 输入 相应 的 文字 信息 ， 根 据 画 面 整体 效果 调 
整 文字 的 大 小 和 颜色 ， 使 文字 之 间 的 层次 更 加 清晰 。 


Water p a Be 


有 补 水 绝 括 
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由 于 


色 为 日 色 ， 


步骤 12 


不适 明度 [Or 


选择 并 为 文字 设置 “ 摘 边 ”效果 


输入 的 主体 文字 与 背景 颜色 大 过 相近 ， 为 了 突出 文字 效果 ， 执 行 “ 图 层 > 图 层 样式 > 质 边 ” 荣 单 合 令 ， 设 置 “ 摘 边 ” 
调整 文字 的 摘 边 粗细 后 ， 单 击 “ 确 定 ”按钮 ， 应 用 样式 ， 为 文字 添加 摘 边 效果 。 


rd Le “一 一 4 | 裔 村 | 
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SONAL AFGHANISTAN SATAY PEOPLE MAGISTER EXCITED 
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添加 更 多 图 层 样式 


继续 使 用 同样 的 方法 ， 为 商品 右 侧 的 其 他 文字 添加 相同 的 日 色 摘 边 效果 ， 统 一 画面 的 风格 。 


SEASONAL AFGOHANISTAN SATAY PEQPLE MAGISTER EXCITED 
[ FEEL SURE YOU SEND TEN YEARS IN SOUTH EAST IS RED 
MIY DAY IS TWSEASONAL AFGHANISTAN SATAY PEQPLE MAGISTER 


步骤 16 ”在 画面 中 绘制 委 饰 元 素 


为 了 让 画面 效果 更 加 完整 ， 使 用 图 形 绘制 工具 在 画面 中 的 适当 位 置 绘制 图 形 ， 完 成 本 实例 的 制作 。 
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实例 94 ”品牌 女装 店 周年 庆 活动 广告 设计 


本 实例 是 为 某 品牌 女装 店 设 计 的 周年 庆 活 动 广告 图 像 ， 将 穿着 该 品牌 服 六 的 模特 图 像 抠 取出 来 ， 通 过 为 其 添加 不 同 颜色 的 背 
景 ， 写 造 清新 靓丽 的 画面 风格 ， 再 利用 居中 排列 的 文字 表现 方式 ， 把 促销 活动 内 容 传递 给 顾客 。 下 面 分 析 此 实例 的 设计 要 点 、 版 
面 布局 等 。 
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设计 分 析 


-设计 要 点 01: 背景 采用 了 错位 排列 的 较 规 则 的 三 角形 进行 组 合 ， 多 种 色彩 的 综合 设计 使 得 版 面 更 能 显示 出 育 春 洋溢 的 情感 


氛围 
: 设计 要 点 02: 本 实例 是 为 女装 品牌 设计 的 促销 广告 ， 所 以 在 模特 的 选择 上 全 部 选用 年 轻 女 性 ， 明 确 品牌 服装 的 消费 群体 。 
` 设计 要 点 03: 画面 中 心 的 文字 通过 大 小 、 色 彩 等 方面 的 对 比 加 强 ， 形 成 视 党 亮点 。 

版 式 分 析 
在 版 面 设计 时 ， 通 过 不 规则 的 版 面 划分 方式 ， 把 穿着 服装 的 模特 放置 在 画面 的 四 周 ， 突 显 品牌 服饰 特征 ; 把 促销 文字 放置 于 


中 间 的 不 规则 多 边 形 中 ， 作 为 视 旬 中心 点 ， 将 要 传递 的 信息 更 准确 、 迅 速 地 传递 出 来 。 


配色 方案 


为 了 突出 该 品牌 服 凌 的 特点 和 消费 群体 ， 画 面 选择 较 靓 丽 的 玫 红 、 粉 红 、 天 监 色 作 为 背景 颜色 ， 这 些 鲜 艳 的 色彩 搭配 万 式 既 


符合 大 部 分 年 轻 女 性 的 审美 市 来 眼前 一 亮 的 视 党 感受 ， 从 而 吸引 更 多 顾客 ， 获 得 更 有 效 的 促销 效果 。 
技术 要 后 
- 使 用 “钢笔 工具 在 背景 中 绘制 三 角形 ， 并 结合 选项 栏 中 的 参数 调整 三 角形 的 颜色 。 


“ 把 拍摄 的 模特 素材 图 像 复 制 到 对 应 的 三 角形 中 ， 利 用 图 层 蒙 版 把 素材 中 的 原音 景 隐藏 ， 抠 取 穿 着 服装 的 模特 图 像 。 


` 使 用 “ 横 排 文字 工具 ”为 画面 添加 所 需 的 文字 信息 ， 并 通过 “字符 ”面板 设置 文字 属性 。 


实例 95 “精品 女 式 手 提包 促销 广告 设计 


本 实例 是 为 女 陈 箱包 店铺 设计 的 促销 广告 ， 画 面 以 帆 具 时 尚 感 的 深 监 色 为 主 色 ， 将 同类 色 系 的 蓝 色 手提 包 放 置 于 画面 右 侧 ， 
突出 商品 的 外 形 特点 。 为 了 宫 造 更 稳定 的 画面 感 ， 在 左 侧 和 中 间 添 加 妆 饰 性 元 素 和 文字 信息 ， 展 示 更 加 完整 的 画面 效果 。 
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设计 分 析 


. 设计 要 点 01: 手提 包 的 扣 件 为 漂亮 的 金属 色 ， 因 此 在 设计 时 为 主体 文字 过 加 了 金属 黄色 ， 并 通过 淡淡 的 星光 修饰 ， 统 一 画 
面 风格 。 


设计 要 点 02: 为 了 让 画面 整体 营造 出 强烈 的 视 党 冲击 力 ， 选 择 了 明 瞳 分 明 、 层 次 感 极 强 的 渐变 背景 进行 修饰 ， 使 得 包 包 更 
加 醒目 、 突出 。 


“ 设计 要 点 03: 在 装饰 元 素 的 选择 上 ， 选 用 黑色 的 珍珠 来 点 组 ， 画 面 更 显 优雅 。 


版 式 分 析 


本 实例 在 设计 的 过 程 中 对 图 片 进行 了 合理 的 布局 ， 使 用 元、 右 相 对 对 称 的 版 面 构成 方式 ， 让 画面 显得 更 加 平稳， 并 将 版 面 中 
的 文字 信息 置 于 中 间 位 置 ， 让 顾客 能 直观 地 获取 画面 的 信息 。 


配色 方案 


在 配色 方案 中 ， 为 了 突出 手提 包 如 同 丽 蓝 色 海洋 般 的 魅力 ， 在 背景 的 处 理 上 选择 了 类 似 的 蓝 色 ， 统 一 的 色彩 搭配 更 彰显 出 包 
包 的 品质 感 ; 同时 ， 用 金色 的 文字 和 淡 黄色 的 星光 进行 修饰 ， 使 设计 主题 更 醒目 、 突 出 ， 能 第 一 时 间 吸 引 消费 者 的 视 续 。 


技术 要 点 
` 使 用 “移动 工具 把 海豚 和 渐变 的 背景 图 像 通过 图 层 蒙 版 融合 到 一 起 。 


: 把 手提 包 复 制 到 画面 右 侧 ， 用 “钢笔 工具 沿 其 边缘 绘制 路 径 ， 并 创建 图 层 蒙 版 ， 隐 藏 多 余 背 景 后 调整 包 包 的 颜色 ， 让 手 


提包 顾 色 更 自然 。 


使 用 文字 工具 在 画面 中 间 输 入 文字 ， 并 利用 “图 层 样 式 ” 功 能 为 主体 文字 有 司 加 渐变 颜色 ， 使 文字 更 为 绚丽 。 


实例 96 ”母亲 节 欢 迎 模块 设计 


本 实例 是 为 某 品牌 化 妆 品 设计 的 母 杀 书 主题 的 欢迎 模块 ， 制 作 时 用 花 米 作为 背景 ， 通 过 暗色 的 花 米 营造 出 一 种 优雅 、 甜 密 的 
感 锅 ， 在 设计 时 将 化 水 素材 和 艺术 化 的 标题 文字 相 结 合 ， 为 画面 增添 了 精致 感 。 下 面 分 析 此 实例 的 设计 要 点 、 版 面 布 局 等 。 
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设计 分 析 
设计 要 点 01: 由 于 本 实例 的 主题 为 母亲 节 ， 因 此 选择 了 与 女性 相关 的 花 采 作为 背景 ， 突 显 出 女性 柔美 的 特质 。 


设计 要 点 02: 在 文字 的 处 理 上 ， 采 用 了 艺术 化 的 标题 文字 设计 ， 增 强 了 画面 的 设计 感 ， 让 简单 的 画面 呈现 出 更 精致 的 感 


` 设计 要 点 03: 将 要 表现 的 商品 通过 有 登 加 的 方式 安排 在 画面 右 侧 ， 并 辅 以 花季 装饰 ， 让 整个 画面 传递 出 浓 浓 的 温情 。 
版 式 分 析 


将 了 商品 放 在 画面 的 右 侧 ,以 深 色 的 花 米 背景 将 其 突显 出 来 ， 把 活动 的 主要 促销 信息 整 乔 地 排列 在 画面 的 左 侧 ， 与 右 侧 的 商品 
图 像 壳 相 呼 应 ， 显 得 极 具 节奏 感 ， 让 人 一 目 了 然 。 


配色 方案 


本 实例 使 用 明度 较 暗 的 黑色 、 绿 色 为 衣 景 色 ， 在 其 中 用 玫 红 色 的 文字 和 人 花 打 对 画面 进行 点 缀 ， 表 现 出 强烈 的 视 况 反差， 使 得 
主体 对 象 更 加 醒目 、 突 出 ， 进 而 增强 了 商品 的 表现 力 ， 同 时 也 能 够 更 好 地 迎合 “ 母 杀 节 ” 主题 。 


技术 要 扣 
` 把 花 采 素材 复制 到 画面 中 ， 复制 图 像 添加 图 层 壹 版， 合成 新 的 背景 图 案 。 


:将 化 妆 品 图 像 复制 到 画面 右 侧 ， 使 用 “磁性 套 索 工具 ”把 商品 从 原 背景 中 抠 出 ， 并 复制 抠 出 的 图 像 ， 调 整 商品 颜色 ， 统 一 
商品 色调 。 

使 用 “钢笔 工具 ”绘制 艺术 字 效 果 ， 结 合 “ 图 层 样 式 ” 功 能 为 文字 添加 丰富 的 样式 ， 再 用 “ 横 排 文字 工具 ”输入 更 多 促销 
信 息 》 完善 整体 效果 。 


实例 97 聚 划算 活动 欢迎 模块 设计 


本 实例 是 为 某 品 牌 数码 店铺 设计 的 聚 划算 活动 欢迎 模块 ， 在 制作 的 过 程 中 为 了 切合 活动 主题 ， 图 像 运 用 了 热情 的 红色 作为 整 
个 画面 的 主 色 ,然后 把 店铺 中 销售 的 数码 商品 添加 到 画面 中 ， 实 现 商 品 的 错位 排列 。 下 面 简 单 分 析 此 案例 的 设计 要 点 、 配 色 技巧 
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设计 分 析 
设计 要 点 01: 选择 渐变 的 红色 作为 背景 颜色 ， 能 够 更 好 地 表达 出 “ 聚 划算 ”的 热闹 氛围 。 
- 设计 要 点 02: 醒目 的 活动 标题 文字 占据 画面 的 中 间 位 置 ， 这 样 的 处 理 方式 能 够 更 快 、 更 准 地 吸引 顾客 的 视线 。 


` 设计 要 点 03: 简单 的 促销 信息 让 顾客 的 视线 集中 到 店家 所 销售 的 数码 商品 上 ， 有 效 地 传递 出 商品 信息 。 


版 式 分 析 


在 版 面 设计 中 ， 把 文字 按 居中 对 齐 的 方式 安排 于 画面 的 中 间 位 置 ， 使 得 促销 信息 更 加 醒目 ， 把 各 种 不 同 的 商品 以 不 规则 的 排 
列 形式 放 在 文字 下 方 ， 显 得 极 具 节奏 感 和 设计 感 。 


配色 方案 


高 纯度 的 红色 能 够 市 来 视 狗 上 的 强力 冲击 ， 用 在 本 实例 中 更 能 将 “ 聚 划算 ”活动 的 热 阁 氛 围 突 显 出 来 。 此 外 ， 在 画面 中 搭配 
日 色 的 文字 ,， 减 小 了 视 党 冲击 感 ， 使 得 画面 的 颜色 显得 更 为 协调 。 


技术 要 扣 


- 使 用 “钢笔 工具 在 背景 中 绘制 同等 大 小 的 菱形 ， 将 其 按 一 定 的 规则 排列 起 来 。 


. 把 数码 商品 复制 到 画面 中 ， 添 加 图 层 蒙 版 把 白色 的 背景 隐藏 ， 通 过 复制 图 像 更 改 图 层 混合 模式 ， 让 商品 与 背景 相 融 合 。 


. 结合 文字 工具 和 “图 层 样式 ”功能 ， 在 图 像 中 间 创 建 相应 的 文字 内 容 。 
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以 让 顾 
照片 ， 这 样 方便 顾客 一 眼 就 知道 该 商品 的 分 类 情况 。 
本 章 内 容 

98 ”规整 的 家 居 用 品 分 类 导航 设计 

99 ”色彩 绚丽 的 女装 店铺 分 类 导航 设计 

100 简约 风格 的 手表 店铺 导航 设计 

101 ”突出 商品 特色 的 女 鞋 店 分 类 导航 设计 

102 ”详尽 的 饰品 店 分 类 导航 设计 

103” 痕 漫 的 婚庆 店 分 类 导航 设计 

104 ”时 尚 与 传统 相 结 合 的 饰品 店 分 类 导航 设计 


105 手机 端 店铺 的 分 类 导航 设计 与 应 用 


实例 98 ”规整 的 家 居 用 品 分 类 导航 设计 


本 实例 是 为 录 品 牌 家 居 店 设计 的 商品 分 
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分 类 导航 是 很 多 电 商 平台 中 都 会 用 到 的 ， 它 向 顾客 展示 了 所 有 品类 商品 的 详细 分 布 。 通 过 单 击 分 类 导航 中 的 文字 或 图 片 ， 可 
客 更 便捷 、 轻 松 地 选 购 符合 目 己 要 求 的 商品 。 在 网 店 中 ， 分 类 导航 的 设计 可 以 通过 传统 的 文字 表现 ， 也 可 以 用 图 片 与 文字 
相 结合 的 方式 表现 ， 具 体 表 现形 式 需 要 根据 整个 店铺 的 委 修 风格 来 定 。 设 计 


导航 时 ， 其 中 的 图 像 需要 选择 具有 代表 性 的 商品 


导航 ， 画 面 中 通过 锋 位 排列 的 商品 图 像 来 表现 不 同类 型 的 商品 ， 利 用 具有 代表 性 的 
别 的 商品 ， 高 图 版 率 的 版 面 设计 让 整个 画面 显得 更 大 气 、 美 观 。 
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随 书 资源 \ 素 材 \12\01.jpg 一 07.jpg 


随 书 资 源 \ 源 文件 \12\ 规 整 的 家 居 用 
源 文件 品 分 类 导航 .psd 


步骤 01 ”在 育 景 中 绘制 起 形 


局 动 Photoshop 程 序 ， 新 建 一 个 文档 。 由 于 分 类 导航 中 的 商品 类 别 较 多 ， 为 了 便于 编辑 和 管理 图 像 ， 先 单 击 “ 创 建新 
组 ”按钮 ， 新 建 “ 商 品 ” 图 层 组 ， 然 后 用 “矩形 工具 ”在 画面 左上 角 绘 制 一 个 黑色 的 矩形， 用 于 确定 商品 图 像 的 摆 放 位 置 。 


步骤 02 ”复制 息 形 更 改 其 颜色 


按 下 快捷 键 Ctrl+J， 复 制 息 形 ， 创 建 “ 埠 形 1 拷贝 ”图 层 。 为 了 将 丰 形 区 分 开 来 ， 双 击 “ 和 窍 形 1 拷贝 ”图 层 缩 钢 图 ， 在 打开 的 
对 话 框 中 重新 设置 颜色 为 R980、G88、B88， 更 改 图 形 颜色 ， 并 适当 调整 图 形 的 大 小 和 位 置 。 


步骤 03 ”添加 更 多 起 形 划分 分 类 信息 


使 用 同样 的 方法 ， 复 制 更 多 的 目 形 。 根 据 设 计 构思 对 这 些 起 形 的 颜色 、 大 小 和 位 置 进 行 调整 ， 确 定 要 添加 商品 图 像 的 位 置 。 


步骤 04 复制 并 添加 素材 图 像 


打开 素材 文件 01.jpg， 用 “移动 工具 ”把 图 像 拖 蝶 到 新 建 的 文件 中 ， 适 当 调 整 其 大 小 ， 放 在 图 像 左 上 和 角 的 算 形 上 。 


步骤 05 ”创建 甬 贴 蒙 版 拼合 图 像 


为 了 将 超出 矩形 的 图 像 隐藏 ， 执 行 “ 图 层 > 创 建 齐 贴 蒙 版 ”菜单 命令 ,创建 剪贴 蒙 版 ,将 “和 矩 形 1” 和 “图 层 1” 图 层 添 加 到 
一 个 剪贴 组 中 。 完 成 后 可 在 图 像 窗口 中 查看 合成 的 图 像 效果 。 


步骤 06 ”复制 图 像 创建 剪贴 蒙 版 


打开 素材 文件 02jpg， 选 用 “移动 工具 ”把 图 像 折 和 擅 到 第 二 个 灰色 起 形 上 ， 得 到 “图 层 2” 图 层 ， 适 当 调 整 其 大 小 ， 然 后 创 
圭 剪 贴花 版 ， 把 超出 灰色 埠 形 的 商品 图 像 隐藏 起 来 。 
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步骤 07 复制 图 像 添 加 蔓 贴 蒙 版 


打开 素材 文件 03jpg， 选 用 “移动 工具 ”把 打开 的 图 像 拖 折 至 下 排 第 三 个 灰色 乱 形 上 ， 得 到 “图 层 3” 图 层 ， 适 当 调 整 其 大 
小 ， 然 后 创建 勇 贴 蒙 版 ， 把 超出 灰色 起 形 的 商品 图 像 隐藏 起 来 。 


步骤 08 用 “可 选 颜色 ”修饰 床 品 颜色 


添加 第 三 张 图 像 后 ， 发 现 照 片 中 的 床 品 颜色 偏 黄 。 因 此 按 住 Ctrl 键 不 放 ， 单 击 “ 矩 形 1 拷贝 ”图 层 缩 览 图 ， 载 入 选区 。 在 图 


像 最 上 方 创建 “可 选 颜色 1” 调 整 图 层 ， 打 开 “ 属 性 ”面板 ， 在 面板 中 分 别 选 择 “黄色 ”和 “红色 ”， 调 整 这 两 种 颜色 的 特 分 
比 ， 削 弱 黄 色 和 红色 ， 统 一 商品 颜色 。 


区 |] 4 可 寺 颜 色 


自 定 
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步骤 09 ”添加 更 多 的 家 居 商 品 图 像 


继续 使 用 同样 的 方法 ， 用 “移动 工具 ”把 更 多 的 家 居 丙 品 复制 到 新 建 的 文件 中 ， 并 通过 创建 剪贴 蒙 版 拼合 图 像 的 方式 ， 得 到 
规则 排列 的 商品 分 类 效果 。 


步骤 10 ”打开 并 复制 纹理 素材 


打开 素材 文件 06.jjpg， 选 用 “移动 工具 ”把 图 像 拖 蝶 至 留 日 的 算 形 上 ， 根 据 版 面 布 局 ， 适 当 调 整 素材 图 像 的 大 小 和 位 置 。 


步骤 11 设置 “曲线 ”降低 图 像 亮度 


添加 布 纹 素 材 后 ， 感 锡 图 像 偏 亮 ， 可 适当 降低 其 亮度 。 执 行 “ 图 像 > 调 整 > 曲线 ”菜单 命令 , 打开“ 曲线” 对话 框 。 由 于 是 
要 降低 图 像 亮 度 ， 所 以 单 击 并 向 下 拖 蝶 曲线 ,设置 好 后 单 击 “确定 ”按钮 ， 调 整 图 像 亮 度 。 
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步骤 12 ”创建 剪贴 蒙 唉 拼合 图 像 


为 了 把 超出 息 形 的 布 纹 素材 隐藏 起 来 ， 执 行 “图 层 > 创 建 剪 贴 蒙 版 ”菜单 俞 令 ， 创 建 勇 贴花 版 ， 然 后 将 布 纹 素材 图 像 复 制 ， 
分 别 将 其 移 至 留 日 的 起 形 上 。 通 过 创建 剪贴 蒙 版 拼合 图 像 ， 完 成 分 类 导航 图 片 的 设置 。 
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步骤 13 ”设置 并 输入 标题 文字 


为 了 让 分 类 导航 更 加 明确 ， 接 下 来 在 画面 中 输入 文字 。 创 建 “ 标 题 文 字 ” 图 层 组 ， 用 于 设置 标题 文字 。 选 择 “ 横 排 文 字 工 
具 ”,， 打 开 “ 字 符 ” 面 板 ， 在 面板 中 选择 边 绿 较 骤 和 的 方正 三 之 黑 ， 再 把 文字 的 颜色 设置 为 较 鲜 艳 的 红色 ， 在 图 像 项 部 单 击 并 输 
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步骤 14 调整 文字 属性 继续 输入 文字 
为 了 突出 文字 的 层次 关系 ， 需 要 为 输入 的 文字 设置 不 同 的 字体 和 大 小 
文字 ， 输 入 后 根据 喜好 对 文字 的 字体 和 字号 进行 调整 。 


先 用 “ 横 排 文字 工具 ”在 已 输入 的 文字 旁边 继续 输入 


方正 文 等 GEBK,,， 


29.17 点 


PRODUCT CLASSIFICATION 
ta 116.67 点 
v -50 


| 1 100% 


所 号 


0 局 


T TT TT Tr T T T 王 
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步骤 15 输入 更 多 文字 


输入 身 文 字母 后 ， 接 下 来 区 是 中 文 的 输入 。 输 入 前 根据 需要 对 文字 的 字体 和 颜色 进行 调整 ， 然 后 在 红色 文字 下 廊 的 中 间 位 置 
单 击 ， 输 入 文字 “产品 分 类 ”。 
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步骤 16 创建 商品 分 类 文字 
经 过 前 面 的 操作 ,创建 了 标题 义 字 ， 接 下 来 束 是 分 类 信息 的 输入 。 为 了 便于 将 文字 区 分 开 来 ， 先 创建 “四 件 套 专区 ”图 层 


组 ， 然 后 在 图 层 中 输入 对 应 的 文字 信息 。 
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© > 了 标题 文字 
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步骤 17 ”用 “ 目 定 形状 工具 ”绘制 提示 和 区 > 


为 了 让 图 像 中 的 商品 分 类 指示 更 加 明确 ， 可 以 在 图 像 中 添加 箭头 图 案 。 选 择 “ 目 定形 状 工 具 ”,， 单 击 “ 形 状 ” 石 侧 的 下 拉 按 


钮 ， 在 展开 的 “形状 ” 拾 色 器 中 单 击 “ 箭 头 6”， 人 在 文字 旁边 单 击 并 拖 忠 女 标 ， 绘 制 箭头 图 案 。 绘 制 后 根据 商品 位 置 ， 水 平 翻转 


选择 “直线 工具 ”， 人 在 选项 栏 中 将 填充 颜色 设置 为 红色 ， 与 标题 文字 的 颜色 相 呼 应 ,将 “粗细 ”设置 为 3 像素 ， 在 文字 下 方 
绘制 一 条 红色 的 线条 ， 突 出 文字 信息 。 


| 
加 


按 下 快捷 键 Ctrl+J， 复 制 “ 四 件 套 专区 ”图 层 组 ,创建 “四 件 套 专区 拷贝 ”图 层 组 。 使 用 “移动 工具 ”移动 图 层 组 中 的 文字 
和 图 形 位 置 ， 并 把 图 层 组 重新 命名 为 “枕头 专区 ”， 将 文字 分 类 信息 区 分 开 来 。 
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步骤 20 ”调整 箭头 方 问 


选择 “ 横 排 文字 工具 ”， 选 择 “ 枕 头 专区 ”图 层 组 中 的 文字 信息 ， 根 据 图 像 中 的 商品 更 改 分 类 信息 ; 然后 选择 季 头 图 案 ， 执 
行 “ 编 辑 > 变换 > 顺 时 针 旋 转 90 度 ”菜单 命令 ,旋转 图 像 ， 让 箭头 指示 的 商品 更 加 准确 。 


步骤 21 ”添加 更 多 文字 


继续 使 用 同样 的 方法 ， 复 制 文字 图 层 组 ， 分 别 对 图 层 组 中 的 文字 和 箭头 图 案 进 行 调整 ， 完 成 商品 分 类 导航 图 像 的 设计 。 


实例 99 ”色彩 绚丽 的 女 兴 店 铺 分 类 导航 设计 


本 实例 是 为 一 家 女 妆 店铺 设计 的 分 类 导 般 图， 画面 中 利用 不 同 颜色 的 起 形 作为 分 类 育 景 ， 通 过 红色 、 杜 色 、 紧 色 等 色 块 将 不 
同类 型 的 服 六 从 色彩 上 加 以 区 分 ， 利 用 相同 字体 的 文字 设置 对 画面 进行 统一 ， 让 画面 色彩 丰富 又 不 会 显得 很 凌乱 。 
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步骤 01 在 新 建 的 文件 中 为 背景 填充 颜色 


启动 Photoshop 程 序 ， 新 建 一 个 文档 ， 然 后 根据 商品 特色 定义 分 类 导航 风格 。 由 于 此 实例 是 为 女 沪 店铺 设计 分 类 导航 ， 所 
以 把 前 景色 设置 为 R237、G28、B68， 设 置 后 创建 “图 层 1” 图 层 ， 按 下 快捷 键 Alt+ Delete， 将 背景 填充 为 玫 红 色 ，。 


只 有 业 邮 粘 色 


步骤 02 用 “ 窍 形 工 具 ” 绘 制 方形 


绘制 育 景 后 ， 接 下 来 融 是 商品 的 分 类 设置 。 为 了 便于 管理 服 半分 类 ， 创 建 图 层 组 ， 合 名 为 “镇 店 之 至 ”， 说 明 此 区 域 的 商品 
是 店铺 中 销量 较 好 的 商品 。 选 择 “ 算 形 工 具 ”， 绘制 一 个 日 色 的 矩形。 
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步骤 03 ”复制 图 像 添加 花 版 


把 穿 看 该 品牌 服 委 的 模特 素材 08.jpg 添 加 到 新 建文 件 中 ， 根 据 版 面 布局 适当 调整 其 大 小 ， 再 执行 “图 层 > 创建 剪贴 蒙 版 ” 茉 
单 命令 ,创建 剪贴 蒙 版 ， 把 模特 图 像 置 入 矩形 内 部 。 


步骤 04 ”使 用 “画笔 工具 ”涂抹 背景 


观察 图 像 友 现 人 物 下 半 部 分 有 较 明 显 的 监 色 背 景 ， 因 此 添加 图 层 蒙 版 ， 选 择 “ 男 笔 工 具 ”， 在 “ 贺 笔 预 设 ” 选 取 器 中 选择 合 
适 的 画笔 ， 并 调整 画笔 笔触 大 小 ， 在 模特 劳 边 的 蓝 色 背景 处 涂抹 ， 隐 藏 图 像 。 


步骤 05 用 “钢笔 工具 ”绘制 三 角形 


将 前 景色 设置 为 R237、G28、B68， 设 置 后 选择 “钢笔 工具 ”， 在 模特 右 下 万 绘制 三 角形 。 绘 制 后 在 图 像 窗 口中 可 看 到 抠 出 
的 模特 图 像 与 下 方 的 图 案 目 然 地 组 合成 一 个 整体 。 


步骤 06 绘制 更 多 图 形 设置 文字 属性 


由 于 日 色 和 矩形 的 左 侧 太空 了 ， 画 面 显得 不 罕 凑 ， 所 以 继续 使 用 “钢笔 工具 ”在 图 像 上 绘制 更 多 不 同 大 小 、 颜 色 的 多 边 形 图 
形 。 绘 制 完 成 后 束 是 文字 的 添加 ， 在 添加 文字 前 ,选择 “ 横 排 文字 工具 ”， 打开“ 字符 ”面板 ， 在 面板 中 对 要 输入 的 文字 属性 进 
行 设 置 。 为 了 统一 画面 风格 ， 这 里 把 文字 颜色 也 设置 为 玫 红 色 。 
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步骤 07 在 留 日 区 域 输入 文字 


将 姐 标 移 圣 模特 左 侧 的 空 晶 处， 单 击 并 输入 文字 “镇 店 之 于 ”。 为 了 使 说 明文 字 之 间 的 层次 更 加 清晰 ， 需 要 为 说 明文 字 设 置 
不 同 的 字体 和 色彩 。 打 开 “ 字 符 ” 面 板 ， 在 面板 中 对 文字 属性 进行 设置 。 设 置 后 在 文字 “镇 店 之 宇 ” 下 方 单 击 并 输入 文字 “时 尚 


iT i100% 


A 0 


步骤 08 ”调整 文字 属性 输入 文字 


打开 “字符 ”面板 ， 在 面板 中 重新 调整 文字 的 字体 、 字 号 等 属性 ， 然 后 在 画面 中 继续 单 击 并 输入 文字 。 
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步骤 09 用 “上 自 定 形状 工具 ”绘制 简 S 


使 用 同样 的 方法 ， 结 合 “ 横 排 文字 工具 ”和 “字符 ”面板 在 画面 中 添加 更 多 的 分 类 信息 文字 。 为 了 让 信息 指示 更 清 杷 ， 选 
择 “ 目 定形 状 工具 ”， 在 “形状 ” 拾 色 器 中 选择 “和 荫 头 2” 形 状 ， 在 右 下 角 的 三 角形 图 形 上 绘制 稍 头 图 案 。 
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步骤 10 ”设置 颜色 绘制 矩形 


经 过 前 面 的 操作 ， 完 成 了 商品 分 类 一 的 设计 ， 接 下 来 是 分 类 二 的 设计 。 创 建 “冬装 新 品 ”图 层 组 ， 单 击 工具 箱 中 的 “设置 前 
景色 ”按钮 ， 在 打开 的 “ 拾 色 器 (前 景色 ) ”对 话 框 中 设置 颜色 为 R24M6、G116、B28。 单 击 “ 确 定 ”按钮 ， 在 画面 中 绘制 一 个 
榜 色 的 算 形 。 


Dll 
立 训 由 受 


] 只 有 Web 颜色 DB 
| 人 741c 


步骤 11 复制 图 像 添 加 图 层 蒙 版 


把 穿 痢 该 品牌 服 妆 的 模特 素材 09.jpg 添 加 到 新 建文 件 中 ， 得 到 “图 层 3” 图 层 。 为 了 使 画面 更 干净， 为 “图 层 3” 图 层 添加 莹 
版 ,选择 “画笔 工具 ”， 设置 前 景色 为 黑色 ， 用 画笔 在 人 物 旁 边 的 背景 处 涂抹 ， 将 原 背 景 图像 隐 藏 ， 抠 取 模 特 图 像 。 


步骤 12 ”创建 剪贴 家 版 隐藏 部 分 图 像 


里 只 需要 显示 模特 局 部 效果 ， 所 以 执行 “图 层 > 创建 剪贴 蒙 版 ” 荣 单 合 令 ， 创 建 剪 贴 蒙 版 ， 把 超出 橙色 起 形 的 模特 图 像 隐 
藏 ， 骨 根据 版 面 适 当 调整 模特 的 位 置 。 


步骤 13 ”使 用 “钢笔 工具 ”绘制 三 角形 


将 前 景色 设置 为 与 档 色 背景 相近 的 颜色 ， 这 里 设置 颜色 值 为 R183、G90、B21。 设 置 后 选择 “钢笔 工具 ”， 在 模特 右 下 方 绘 
制 三 角形 ， 用 于 后 面 输入 并 突出 服饰 分 类 信息 。 


步骤 14 在 图 形 上 输入 文字 


选择 “ 横 排 文字 工具 ”， 在 第 二 个 商品 分 类 劳 边 单 击 并 输入 相应 的 服饰 分 类 信息 。 输 入 后 为 表现 文字 的 层次 关系 ， 可 通 
过 “字符 ”面板 对 文字 的 大 小 和 字体 进行 适当 调整 。 
工 ， 点击 进 入 
TT 6060! 
工 新 品 上 新 全 线 特 惠 疯 .… 
T NEW 
1 冬装 新 品 
加 形 扰 11 
fF 村 直 小国 用 图 层 3 


步骤 15 绘制 箭头 图 案 


选择 “ 目 定 形状 工具 ”， 在 “形状 ” 拾 色 器 中 选择 “和 荫 头 2” 形 状 ， 在 右 下 角 的 三 角形 图 形 上 绘制 稍 头 图 案 。 继 续 使 用 相同 


的 方法 ， 进 行 其 他 几 个 服饰 分 类 板块 的 设计 ， 完 成 本 实例 的 制作 。 
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实例 100 ”简约 风格 的 手表 店铺 导航 设计 


本 实例 是 为 销售 手表 的 店铺 设计 的 商品 分 类 导航 图 ， 淡 淡 的 灰色 育 景 让 画面 显 


许 


出 ， 袁 显 了 商品 的 高 品质 。 同 时 ， 在 画面 中 添加 了 黄色 的 线条 和 椭圆 半 饰 元 背 ， 


得 更 加 高 新 、 大 气 ， 将 手表 的 分 类 显示 示 得 更 加 
让 单调 的 画面 看 起 来 更 有 节奏 感 。 


局 竺 : OP 商家 效 十 万 买 家 瞧 定 
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素 材 随 书 资源 \ 素 材 \12\13.jpg 一 20.jpg 


随 书 资源 \ 源 文件 \12\ 简 约 风格 的 手 


源 文 件 表 店 铺 导航 设计 .psd 


步骤 01 填 元 灰色 育 景 


局 动 Photoshop 程 序 ， 新 建 一 个 文档 。 为 了 表现 淡淡 的 复 训 风格 ， 单 击 工具 箱 中 的 “设置 前 景色 ”按钮 ， 打开“ 拾 色 器 
(前 景色 ) ”对 话 框 ， 把 前 景色 设置 为 灰色 。 创 建新 图 层 ， 按 下 快捷 键 Alt+ Delete， 填 充 颜色 ， 定 义 分 类 导航 的 风格 。 


= | e7e7e7 | 


步骤 02 使 用 样式 为 背景 添加 渐变 效果 


为 了 使 背景 表现 出 层次 感 ， 双 击 “ 图 层 1” 图 层 ,， 打开“ 图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 多 选 “ 淘 变革 加 ”样式 ， 然 后 对 渐 
变 颜 色 进 行 设置 ， 得 到 从 日 色 到 灰色 的 渐变 效果 。 


村 
尘 


新 
混合 模式 : [ 正常 
不 和 明度 (P): 


*| [Vi 与 图 层 对 齐全 
| 重 千 对 齐 | 


步骤 03 ”用 “直线 工具 ”绘制 深 色 线 条 


选择 “直线 工具 ”， 人 在 选项 柱 中 把 绘制 模式 设置 为 “形状 ”， 填 充 颜 色 设 置 为 较 深 的 灰色 ， 调 整 线条 粗细 ， 在 画面 中 单 击 并 
拖 蝶 姐 标 ， 绘 制 线条 ， 把 标题 部 分 划分 出 来 。 


/ -区 填充 : 加 描 b: 加 | 奖 粕 血 : 2 像素 


步骤 04 用 “ 息 形 工具 ”绘制 小 正方 形 


保持 前 景色 不 变 ， 选 择 “ 息 形 工具 ”， 在 选项 栏 中 把 绘制 模式 设置 为 “形状 ”， 在 线条 中 间 位 置 绘制 一 个 灰色 的 方形 图 形 。 


步骤 05 复制 图 像 创建 并 排 图 形 效果 


为 了 让 绘制 的 图 形 看 起 来 更 加 丰富 ， 连 续 按 下 快捷 键 Ctrl+J， 复 制 3 个 灰色 正方 形 。 用 “移动 工具 ”把 复制 的 正方 形 移 至 不 
同 的 位 置 ， 为 了 使 图 形 更 加 整齐 ， 选 择 “ 和 窍 形 1” 至 “矩形 1 拷贝 3” 图 层 ， 执 行 “ 图 层 > 对 齐 > 顶 边 ”菜单 俞 令 ， 对 齐 图 形 。 


项 豆 起 HH 
田 忆 和 
辆 忌 矩形 
较 辣 拭 形 


步骤 06 用 “钢笔 工具 ”绘制 曲线 


接 下 来 还 需要 绘制 一 条 曲线 ， 选 择 “ 钢 笔 工 具 ”， 在 选项 栏 中 将 绘制 模式 设置 为 “形状 ”， 填 充 疝 色 设置 为 “无 ”， 摘 边 颤 
色 设 置 为 与 方形 相同 的 灰色 ， 然 后 在 画面 中 单 击 并 拖 忠 女 标 ， 绘 制 曲线 。 


注 
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步骤 07 给 制 多 个 小 圆 图 形 


完成 线条 的 绘制 后 ， 还 需要 绘制 图 形 以 定位 商品 的 分 类 类 别 。 选 择 “ 椭 圆 工 具 ”， 人 在 选项 栏 中 调整 填充 颜色 ,设置 为 与 背景 
颜色 反 帮 较 大 的 黄色 ， 以 突出 画面 的 亮 尽 ， 运 用 “椭圆 工具 ”在 画面 中 绘制 圆 形 并 复制 得 到 更 多 的 图 形 效果 。 


步骤 08 ”绘制 并 复制 中 形 


选择 “ 算 形 工具 ”， 在 每 个 小 圆 的 下 方 绘制 相同 颜色 的 窟 形 ， 得 到 对 称 的 图 形 效果 。 


步骤 09 设置 “投影 ”样式 让 图 形 更 加 立体 


绘制 好 委 饰 元 素 后 ， 融 要 添加 商品 进行 分 类 了 。 在 分 类 前 需要 定位 手表 的 放置 位 置 ， 选 用 “ 李 圆 工具 ”在 第 一 个 黄色 小 圆 下 
方 绘制 一 个 浅 灰 色 的 正 圆 图形 。 为 了 突出 图 形 的 立体 感 ， 执 行 “图 层 > 图 层 样 式 > 投 影 ” 菜 单 命令 ,打开 “图 层 样式 ”对 话 框 ， 
在 对 话 框 中 对 “投影 ”样式 进行 设置 ， 为 图 形 添加 投影 效果 。 
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步骤 10 ”更 改 路 径 形状 


为 了 让 画面 更 有 设计 感 ， 可 以 对 图 形 进行 简单 的 变形 。 选 择 “添加 狗 点 工具 ”， 在 圆 形 上 单 击 ， 添 加 3 个 铀 点 ; 再 选择 “ 转 
换 点 工具 ”， 单 击 中 间 一 个 销 点 ， 将 曲线 销 上 后 转换 为 直线 销 上 后 。 


反 巧 提示 : 添加 或 删除 路 径 销 操 


“直接 选择 工具 ”选择 路 径 后 ， 右 击 图 像 窗 口中 的 路 径 ， 在 弹出 的 快捷 菜单 中 执行 “添加 锚 点 ”或 “删除 锚 点 ”命令 ， 可 快 
速 在 路 径 中 添加 锚 点 ， 或 删除 路 径 中 选中 的 锚 点 。 


步骤 11 更改 路 径 形状 


单 击 工具 箱 中 的 “直接 选择 工具 ”按钮 ， 单 击 转换 后 的 路 径 销 点 ， 并 同 右 上 角 拖 忠 ， 将 圆 形 转换 为 更 具有 指示 性 的 图 形 。 


步骤 12 复制 图 像 创建 剪贴 蒙 版 


把 担 摄 的 手表 素材 图 像 13jpg 添 加 到 图 形 上 方 ， 根 据 版 面 布 局 适当 调整 手表 图 像 的 大 小 。 之 后 需要 将 手表 图 像 置 入 到 图 形 
中 ， 所 以 执行 “图 层 > 创 建 费 贴 蒙 版 ” 菜 蛙 命令， 创建 勇 贴 蒙 版 ， 拼 合 图 像 。 


步骤 13 ”复制 更 多 图 像 添 加 蔓 贴 蒙 版 


选择 “移动 工具 ”， 单 击 并 拖 蝶 鼠标 ， 适 当 调 整 手 表 所 在 的 位 置 。 继 续 使 用 同样 的 方法 ， 把 更 多 的 手表 照片 复制 到 新 建 的 文 


件 中 ， 通 过 创建 勇 贴花 版 ， 合 成 新 的 画面 效果 。 


步骤 14 ”设置 文字 属性 输入 品牌 文字 


过 着 需要 进行 文字 的 设置 。 创 建 “文字 ”图 层 组 ， 选 择 “ 横 排 文 字 工具 ”， 打 开 “ 字 符 ” 面 板 。 这 


完成 分 类 图 像 的 设置 后 ， 接 
里 为 了 突出 店铺 品牌 信息 ， 选 择 与 背景 颜色 对 比较 明显 的 蓝 色 作为 文字 闸 色 ， 然 后 把 文字 设置 为 较 粗 的 字体 ， 单 击 并 输入 手表 品 


牌 。 


综艺 商 体 … 
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选择 “ 横 排 文字 工具 ”， 继 续 在 已 输入 的 文字 芳 边 输入 更 多 文字 。 输 入 后 为 了 突出 文字 的 主 次 天 系 ， 将 文字 的 字号 设置 得 小 


且 仁 
— 止 C 


正 深 艺 简 体 ,… 


+t 全 116.67 点 
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继续 使 用 “ 横 排 文字 工具 ”在 画面 中 添加 手表 介绍 和 分 类 信息 。 输 入 完成 后 选择 中 间 部 分 的 段 洛 文 字 ， 单 击 “ 段 洲 ” 面 板 中 


的 “居中 对 齐 文 本 ”按钮 ， 对 齐 文字 ， 让 画面 的 视 党 中 心 更 为 集中 。 
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实例 101 ”突出 商品 特色 的 女 圣 店 分 类 导航 设计 


本 实例 是 为 女 鞋 店 设计 的 商品 分 类 导 舱 图， 画面 中 为 了 突出 中 间 的 鞋子 分 类 信息 ， 使 用 浅黄 、 绿 色 作 为 背景 的 主 色 调 ， 利 用 
同等 大 小 的 圆 形 把 各 个 种 类 的 鞋子 单独 显示 出 来 。 另 外 ， 为 了 使 商品 的 分 类 更 加 精细 ， 在 每 双 鞋 子 下 方 输入 了 相应 的 分 类 信息 ， 
做 到 了 主 次 分 明 ， 设 计 出 非常 漂亮 的 分 类 导航 图 。 


正 保证 正品 内 电 发 货 ps 售后 无 忧 保 消费 傈 降 
天 猫 品牌 商家 /正品 保证 发 货 速度 / 收 货 及 时 15 天 无 理由 退换 代 减 信 经 营 /保障 权益 
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随 书 资 源 \ 源 文件 \12\ 突 出 商品 特色 的 女 鞋 店 分 类 
源 文件 导航 设计 .psd 


步骤 01 为 图 像 填 充 纯色 背景 


局 动 Photoshop 程 序 ， 新 建 一 个 文档。 根据 本 实例 中 鞋子 的 整体 风格 ， 对 前 景色 进行 设置 。 设 置 后 创建 新 图 层 ， 按 下 快捷 
键 Alt+ Delete， 将 育 景 填 充 为 淡淡 的 橘 色 。 


242 


# [fae1b5 


步骤 02 ”使 用 “画笔 工具 ”绘制 图 案 


如 果 育 景 中 只 有 一 种 颜色 ， 画 面 难免 会 显得 单调 。 因 此 选择 “画笔 工具 ”， 分 别 对 前 景色 进行 调整 后 ， 选 用 “和 柔 边 圆 ” 画 


E17== 


在 背景 中 的 不 同位 置 单 击 ， 进 行 图 案 的 绘制 ， 得 到 色彩 更 丰富 的 背景 。 


步骤 03 ”复制 图 像 更 改 图 层 混合 模式 


为 了 迎合 女 鞋 这 一 主题 ， 打 开 粉 色 的 桃花 素材 21jpg， 选 择 “ 移 动工 具 ”， 把 桃花 图 像 拖 蝶 至 背景 中 ， 表 把 图 层 竟 合 模 式 设 


置 为 “ 变 暗 ”，““ 不 透明 度 ” 设 置 为 52%， 使 田 面 与 背景 融合 得 更 为 目 然 。 


不 透明 度 : 52% 


填 帝 : 100% 


将 桃花 添加 a 到 背景 后 ， 友 现 花 米 的 颜色 与 背景 颜色 显得 不 是 很 协调 。 创 建 “ 选 取 颜 色 1” 调 整 图 层 ， 先 对 “红色 ”百分比 进 


行 调整 ， 削 弱 红 色 的 伦 抄 ， 再 对 “中 性 色 ” 进 行 调整 ， 统 一 画面 颜色 。 


酸 和 二 络 叶 


步骤 05 绘制 渐变 控制 调整 汽 围 
操作 ， 友 现 “可 选 颜 色 ” 调 整 了 整个 图 像 ， 而 这 里 只 需要 对 右 侧 的 伦 抄 应 用 调整 。 所 以 单 击 “ 选 取 颜 色 1” 图 层 


经 过 上 一 步 
控制 颜色 调整 泡 围 。 


“ 靳 变 工具 ”， 从 图 像 左 侧 向 右 拖 碳 线性 渐变 ， 


缩 哆 图， 选择 


-四 回国 加 四 


吴 计 取 颜色 1 
OO 本 村 图 层 5 


步骤 06 用 “ 色 阶 ” 提 亮 偏 瞳 的 阴影 


由 于 伦 米 看 起 来 略微 偏 瞳 ， 所 以 需要 进行 提 亮 。 按 住 Ctrl 键 不 放 ， 单 击 “ 选 取 颜 色 1” 图 层 蒙 版 ， 载 入 选区 。 新 建 “ 色 阶 
1” 调 整 图 层 , 打开 “属性 ”面板 ,选择 “加 亮 阴影 ”选项 ， 提 高 阴影 部 分 的 亮度 。 


ib 局 


Mi i 了 表 时 


RGB 


步骤 07 绘制 并 复制 图 形 


经 过 前 面 的 操作 ， 设 置 好 了 背景 图 像 ， 下 面 进行 商品 的 展示 。 先 用 “椭圆 工具 ”在 画面 左 侧 绘 制 一 个 日 色 正 圆 形 ， 然 后 将 绘 
制 的 图 形 复制 ， 调 整 位 置 ， 得 到 并 排 的 圆 形 效果 。 复 制 圆 形 的 数量 根据 鞋子 的 分 类 数目 来 定 。 为 了 让 画面 更 加 整齐 ， 选 中 所 有 
形 图 层 ， 执 行 “ 图 层 > 对 齐 > 顶 边 ” 荣 单 依 令 ， 对 齐 图 形 。 


和 委 赴 后 中 (V) 


有 0 库 边 (8) 
屁 左边 (UL) 
虽 水 平 居中 (H) 
加 | 右边 (R) 


反 巧 提示 : 选择 多 个 图 层 


Photoshop 中 ， 如 果 需 要 选择 不 连续 的 多 个 图 层 ， 可 按 住 Cttl 键 不 放 ， 依 次 单 击 图 层 ; 如 果 要 选择 连续 的 多 个 图 层 ， 可 按 住 
Shift 键 不 放 ， 单 击 最 上 层 和 最 底层 图 层 。 


步骤 08 ” 疝 画 面 添加 鞋子 素材 


把 准备 好 的 鞋子 照片 22jpg 复 制 到 第 一 个 圆 形 上 方 ， 根 据 和 版 面 布局 调整 其 大 小 。 这 里 要 把 鞋子 放 到 圆 形 中 间 ， 所 以 执行 “图 


层 > 创 建 剪 贴 蒙 版 ”菜单 命令 ,创建 草 贴 蒙 版 ， 隐 藏 圆 形 外 的 鞋子 图 像 。 


步骤 09 ” 疝 画 面 添加 更 多 鞋子 素材 


继续 使 用 同样 的 方法 ， 把 更 多 鞋子 素材 图 像 复制 到 新 建 的 文档 中 ， 然 后 分 别 将 鞋子 调整 至 合适 大 小 ， 并 创建 剪贴 蒙 版 ， 拼 合 
辐 像 。 


步骤 10 ”设置 属性 输入 分 类 信息 


下 面 需 要 为 制作 的 图 像 设 置 对 应 的 分 类 人 信息。 选择 “ 横 排 文字 工具 ”， 在 第 一 个 鞋子 图 像 下 方 输入 文字 “热卖 推荐 ”， 打 
开 “ 字 符 ” 面 板 。 为 了 不 影响 要 表现 的 鞋子 ， 把 文字 设置 为 较 小 一 些 的 字 


旦 体 Regular 


fT] 16.67 点 


VA 0 

而: 0% 

tT 100% 于 100% 
Aa 0 占 新 色 : 


TT TITrTT TTE 


步骤 11 调整 文字 属性 继续 输入 文字 


于 一 


输入 中 文 分 类 后 ， 为 了 补充 分 类 信息 ， 打 开 
存 ” 下 方 输入 对 应 的 基文 信息 。 


再 驻 炙 专 Reg,… 
TILE 1z0.23 点 
Va o 
0% 
i 100% 有 100% 


Aa 0 占 颜色 : 


Tf 


TITITTrT TT 


HOTRECOMMENDATION 


技巧 提示 : 更 改 单 个 文字 属性 


画面 中 输入 文字 后 ， 如 果 要 对 其 中 一 部 分 文字 进行 字体 、 大 小 的 调整 ， 


中 文字 。 


“字符 ”面板 ， 在 面板 中 对 文字 的 属性 进行 一 定 的 调整 ， 然 后 在 文字 “ 


需要 先 用 文字 工具 在 要 更 改 的 文字 上 单 击 并 拖 甩 ， 选 


步骤 12 输入 更 详细 的 分 类 信息 
中 分 类 人 信息。 为 了 统一 画面 效果 ， 结 合 “ 字 得” 面板 为 文字 设置 相 


使 用 同样 的 方法 ， 在 另外 几 张 畦 子 图 像 下 方 输 入 相应 的 商 5 


一 户 生生 


同 的 字体 、 字 号 等 。 


步骤 13 ”用 “直线 工具 ”绘制 线条 
， 将 前 景色 设置 为 R891、G121、B30， 选 择 “ 直 线 工 具 ”， 在 文字 的 上 方 和 下 


输入 文字 后 ， 为 了 把 文字 与 背景 图 像 区 别 开 来 


方 分 别 绘制 一 条 绿色 的 直线 ， 然 后 将 线条 图 层 链 接 ， 便 于 后 面 调整 和 编辑 其 位 置 。 


到 形状 2 
妈 形 状 1 


步骤 14 ”复制 线条 调整 至 不 同 的 位 置 
| 的 两 条 直线 ， 连 续 按 下 快捷 键 Ctrl+J， 复 制 多 组 相同 的 直线 ， 


按 住 Ctrl 键 不 放 ， 单 击 “ 形 状 1” 和 “形状 2” 图 层 ， 选 中 绘 
然后 把 复制 的 线条 移 至 另外 几 双 鞋子 下 方 的 文字 上 ， 得 到 更 丰富 的 画面 效果 ，。 


AI 


技 15 提 示 : 快速 复制 图 像 
Photoshop 中 如 果 需 要 对 图 层 中 的 图 像 进行 复制 ， 可 以 执行 “图 层 > 复 制图 层 ”菜单 命令 ， 也 可 以 按 下 快捷 键 Ctrl+] 进 行 图 层 
的 复制 。 


步骤 12 ”绘制 图 形 添加 更 多 文字 


经 过 前 面 的 操作 ， 完 成 了 商品 的 分 类 设置 。 为 了 使 画面 更 加 完整 ， 使 用 图 形 绘制 工具 在 画面 中 添加 更 多 的 图 形 ， 并 使 用 “ 横 
排 文 字 工 具 ” 在 图 形 旁 边 输 入 对 应 的 文字 ， 完 成 本 实例 的 制作 。 


[| 


实例 102 ”详尽 的 饰品 店 分 类 导航 设计 


本 实例 是 为 饰品 店 设计 的 分 类 导航 图 。 此 分 类 导航 根据 店铺 中 的 饰品 特点 ， 使 用 欧式 花纹 来 修饰 分 类 信息 ， 选 用 店铺 中 的 一 
景 ， 通 过 图 片 中 较为 详尽 的 文字 摘 述 把 商品 的 分 类 划分 得 更 为 仔细 。 


快速 搜索 


SEARCH&RECOMMENDATION 


NEW ARRIVALS CATEGORY MATERIAL 
1223 期 新 品 项 链 (0D 施华洛 世 奇 6 元 素 水 晶 i 100 以 下 特惠 区 ) 
1212 期 新 品 毛衣 链 CD ; 施华洛 世 奇 钳 石 i 100-200 热卖 区 ) 


1209 期 新 品 手链 手镯 (0D AAA 级 钳 石 200-399 〈 超 值 区 ) 
1118 期 新 品 耳 钉 耳 环 S925 银 CD 399 以 上 奢华 体验 区 ) 


1111 期 新 品 奇妙 珠 天 然 水 晶 折扣 区 
1014 期 新 品 戒指 
1007 期 新 品 胸针 


素 材 随 书 资源 \ 素 材 \12\27.jpg、28.psd 
源 文件 随 书 资源 \ 源 文件 \12\ 详 尽 的 饰品 店 分 类 导航 设计 .psd 


设计 分 析 
- 设计 要 点 01: 画面 中 为 了 迎合 店家 销售 的 饰品 风格 ， 选 用 精致 的 欧式 花纹 加 以 修饰 。 


. 设计 要 点 02: 画面 中 的 文字 采用 了 比较 工整 的 黑体 设计 ， 整 个 版 面 显 得 简单 ， 同 时 分 类 信息 也 更 容易 阅读 。 


版 式 分 析 


本 实例 在 设计 的 过 程 中 将 商品 的 分 类 信息 按 水 平方 向 平行 排列 ， 处 理 详细 分 类 时 又 采用 居中 对 齐 的 表现 方式 ， 使 得 版 面 既 规 
整 义 不 失 设 计 感 。 


配色 方案 


在 配色 方案 中 ， 为 了 突出 饰品 奢华 、 高 贵 的 特征 ， 将 画面 头 色 定义 为 浅 灰 色调 。 在 文字 的 表现 上 ， 对 主要 饰品 分 类 信息 采用 
复 训 的 深 红色 ， 与 画面 的 风格 相 搭 配 ， 既 突出 了 商品 分 类 ， 也 增强 了 视 竞 冲击 力 。 为 了 缓解 红色 市 来 的 视觉 冲击 力 ， 在 详细 信息 
的 处 理 上 使 用 黑色 文字 表现 ， 更 完整 地 表现 了 饰品 分 类 。 


技术 要 点 
` 使 用 图 层 蒙 版 对 饰品 图 像 进 行 拼 合 ， 并 通过 降低 不 透明 度 合成 新 的 背景 图 像 。 
` 使 用 “椭圆 工具 ”和 “ 自 定形 状 工具 ”在 画面 中 绘制 不 同形 状 、 颜 色 的 图 形 ， 丰 富 画 面 整 体 效 果 。 


使 用 “ 横 排 文字 工具 ”为 画面 添加 所 需 的 文字 信息 ， 并 通过 “字符 ”面板 设置 文字 属性 。 


实例 103 ”浪漫 的 婚庆 店 分 类 导航 设计 


本 实例 是 为 婚庆 商品 店 设计 的 分 类 导航 图 。 由 于 它 是 为 即将 步 入 婚姻 殿堂 的 情 但 服务 的 购物 场所 ， 因 此 在 画面 中 运用 了 大 量 
的 红色 ， 既 增加 了 画面 的 表现 力 ， 也 与 表现 的 商品 主题 更 加 贴 合 。 


sk[ 吕 训 了 


束 材 随 书 资源 \ 素 材 \12\29.jpg 一 32.jpg 


源 文 件 随 书 资 源 \ 源 文件 \12\ 浪 漫 的 婚庆 店 分 类 导航 设计 .psd 


设计 分 析 


` 设计 要 点 01: 为 了 突显 婚庆 用 品 唯美 、 浪 漫 的 氛围 ， 和 画面 在 背景 素材 的 选择 上 用 了 蓝 色 的 星光 图 案 。 


` 设计 要 点 02: 由 于 本 实例 是 为 婚庆 用 品 店 制作 的 分 类 导航 ， 因 此 在 商品 的 选择 上 用 了 具有 代表 性 的 新 娘 头 饰 、 鞋 子 、 捧 
花 、 礼 品 包 准 等 ， 使 顾客 能 够 根据 图 片 轻松 选择 所 需 的 商品 。 


设计 要 点 03: 在 文字 的 处 理 上 ， 采 用 直 排 文字 的 布局 方式 ， 增 强 了 画面 的 生动 感 。 


版 式 分 析 


本 实例 在 布局 上 较为 简单 ， 上 半 部 分 利用 同等 大 小 的 圆 形 确定 商品 的 摆 放 位 置 ， 下 方 以 对 应 的 文字 对 商品 分 类 进行 细 化 。 这 
种 上 图 下 文 的 表现 方式 让 整个 版 面 看 起 来 既 简 单 又 不 失 壬 感 。 


配色 方案 


红色 是 充满 激情 和 生命 力 的 颜色 。 在 中 国 ， 红 色 是 一 种 代表 吉祥 、 喜 庆 的 颜色 ， 为 了 突显 婚庆 这 一 主题 ， 画 面 中 运用 了 大 量 
的 红色 ， 再 搭配 高 纯度 的 监 色 背 景 ， 蓝 色 与 红色 的 搭配 形成 了 强烈 的 对 比 芭 差 ， 给 人 留 下 了 深刻 的 印象 。 


技术 要 点 
使 用 “椭圆 工具 ”在 文档 中 绘制 贺 形 ， 确 定 商品 的 摆 放 人 位置， 并 为 其 添加 描 边 效果 。 
: 把 拍摄 的 婚庆 用 品 照片 添加 到 绘制 的 图 形 上 ， 通 过 创建 剪贴 蒙 版 对 其 显示 范围 进行 控制 ， 合 成 图 像 。 


使 用 “ 直 排 文字 工具 ”在 图 像 下 方 输入 文字 ， 完 善 分 类 栏 中 的 信息 。 


实例 105 ”手机 并 店 铺 的 分 类 导航 设计 与 应 用 


随 着 移动 网 络 技 术 和 智能 手机 技术 的 友 展 ， 使 用 手机 并 购物 已 成 为 了 一 种 时 尚 。 本 实例 是 为 品牌 女 六 手机 店铺 设计 的 商品 分 
类 导航 。 为 了 方便 顾客 更 直观 地 了 解 服 委 的 分 类 ， 画 面 采 用 了 大 图 来 表现 ， 这 样 既 保证 了 图 片 的 质量 ， 也 有 利于 顾客 看 到 更 完整 
的 衣服 上 身 效 果 。 下 面 分 析 此 实例 的 设计 要 点 、 版 面 布 局 等 。 


i 
hh. es, 
| I en = 
后 > 本 二 
= 


过 材 随 书 资源 \ 素 材 \12\37.jpg 一 41.jpg，42.psd 


随 书 资源 \ 源 文件 \12\ 手 机 痪 店铺 的 分 类 导 


克 艾 作 。 航 设计 与 应 用 .psd 


设计 分 析 


` 设计 要 点 01: 服装 图 片 用 大 图 的 形式 表现 ， 使 得 衣服 的 特点 表现 得 更 加 清楚 。 


` 设计 要 点 02: 由 于 本 实例 是 为 年 轻 女 性 服装 品牌 设计 的 分 类 导航 ， 因 此 在 图 案 色 彩 的 选择 上 选用 了 深 受 年 轻 女性 喜爱 的 粉 
红色 ， 更 加 吸引 眼球。 


设计 要 点 03: 在 画面 文字 的 编排 上 ， 使 用 了 规则 的 “黑体 ”文字 ， 使 得 画面 更 加 整齐 ， 易 于 阅读 。 


版 式 分 析 


由 于 本 实例 是 手机 端 店 铺 分 类 导航 ， 因 此 在 版 面 的 处 理 上 ， 用 了 相近 大 小 的 矩形 进行 划分 ， 规 则 的 版 面 构成 更 方便 顾客 从 分 
类 信息 中 找到 所 需要 的 商品 信息 。 


配色 方案 


粉红 色 是 一 种 娇艳 、 柔 和 的 色彩 ， 给 人 以 温情 、 可 爱 的 印象 。 在 此 实例 的 配色 中 ， 使 用 粉红 色 作 为 主 色 ,搭配 背 景 图 案 中 的 


黄 绿色 ， 让 人 党 得 清新 脱俗 ， 体 现 出 一 种 纤细 优美 的 感觉 ， 更 容易 博得 年 轻 女 性 的 好 感 。 


技术 要 后 


. 使 用 “ 适 形 工具 ”对 画 面 进 行 分 区 ， 确 定 商品 的 五 大 种 类 。 


- 把 准确 的 商品 照片 复制 到 和 天 形 上 方 ， 通 过 创建 剪贴 蒙 版 把 多 余 的 部 分 隐藏 起 来 ， 合 成 新 的 版 面 效 果 。 


使 用 “ 横 排 文字 工具 ”为 画面 添加 所 需 的 文字 信息 ， 结 合 “ 自 定形 状 工具 ”在 文字 旁边 绘制 箭头 图 案 ， 明 确 指示 信息 。 


第 13 章 “商品 细节 描述 设计 


A 


采用 高 档 专业 泳衣 面料 : 
有 其 有 超 强 抗菌 性 的 服装 面料 ， 


柔软 亲 肤 ， 平 整 舒适 。 V 


UNO2 加 宽 用 党 : 

加 宽 启 蒂 设计 :可 有 效 防止 滑 厅 
自由 调节 摩登 距离 ， 无 勒 痕 ， 无 
担 ,轻松 展 吉 


商品 详情 页 的 委 修 设计 主要 是 对 网 店 中 销售 的 单个 商品 的 细节 及 购买 流程 等 一 系列 内 容 进行 介绍 。 在 网 店 交 易 中 ， 没 有 实 
物 ， 也 没有 豆 业 员 ， 所 以 商品 细节 摘 述 页 面 融 承 担 着 主要 的 宣传 、 推 销 工作 。 网 店 美 工人 员 在 设计 详情 页 时 要 对 商品 的 细节 进行 
详尽 的 介绍 ， 将 文字 与 图 片 进行 合 理 搭配 ， 提 取 商 品 的 特点 、 功 能 、 价 值 等 主要 信息 ， 让 顾客 能 够 通过 细节 摘 述 来 了 解 商 品 的 主 
要 特色 、 功 能 等 ， 从 而 达到 商品 销售 的 目的 。 


106 “时尚 活泼 的 运动 服 商品 描述 设计 
107 ”彰显 品质 的 女 包 商品 描述 设计 
108 ”详尽 的 手链 商品 描述 设计 
109 "多彩 的 美甲 商品 描述 设计 
110 ”指示 更 多 细节 的 商品 描述 设计 
111 突出 品牌 文化 的 商品 描述 设计 


112， 简洁 明快 的 售后 服务 描述 设计 


实例 106 ”时 尚 活泼 的 运动 服 商 品 描述 设计 


本 实例 是 为 某 品 牌 运动 服 设计 的 商品 摘 述 图 ， 在 画面 中 使 用 圆 形 对 衣服 的 特定 部 位 进行 放大 显示 ， 同 时 添加 必要 的 说 明文 
字 ， 制 作出 时 尚 活泼 的 运动 服 商品 细 芒 描述 设计 效果 。 


版 型 特点 | 
ERSION FEATUBES 专注 铝 质 . 泳 衣 的 完美 格调 
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p 


NO 高 档 面料 / 拓 


柔 用 高 村 专业 泳衣 面料 : 
具有 超 强 抗菌 性 的 服装 面料 ， 
票 软 亲 肤 ， 平 整 千 适 


NO 2 加 宽 启 带 : 
加 率 离 带 设 计 : 可 有 效 防 止 油状 ， 


/自由 调节 摩登 距离 无 勒 闹 ， 无 负 
担 ,轻松 展 活 


素 材 随 书 资源 \ 素 材 \13\01.jpg、02.psd 


随 书 资源 \ 源 文件 \13\ 时 尚 活泼 的 运动 服 商 


源 文 件 -。 。 
] 公 十 .psd 
NO3 小 V 领 设计 : A” 品 描述 设计 p 
小 V 领 设计 ， 采 用 独特 的 V 领 设计 ， a 
率 满 涤 提 小 胸 ， 高 品 慎 ， 美 胸 形 | 为 
娇嫩 的 皮肤 提供 加 信 呵 护 六 ) 二 
2%AD | 
es QR 
部 9 
NO.4 同 餐 裤 子 : ' 
相同 款式 的 祷 子 搭配 ， 收 名 | 
可 爱 与 性 感 并 存 ， 匆 勒 出 迷人 图 | 
增强 女性 成 然 抑 力 | 
eg 8? 
(RM a 


步 又 01 新 建文 件 并 绘制 背景 


I 新 建 一 个 空 日 文档 。 首 先 需要 定义 图 像 的 整体 风格 ， 选 择 “起 形 工 具 ”， 在 选项 栏 中 设置 灰色 源 
， 然 后 在 画面 中 绘制 起 形 ， 将 背景 设置 为 灰色 调 。 


不 透明 度 : 


3 
口 
一 | Et 


100 * % WV 与 图 层 对 齐 


步骤 02 复制 运动 服 素 材 图 像 至 背景 中 


打开 素材 文件 01jpg， 将 其 复制 到 新 建文 件 中 。 此 时 友 现 素材 图 像 大 大 了 ， 于 是 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 ， 
将 图 像 缩小 至 合适 的 尺寸 ， 并 进行 水 平 翻转 ， 下 通过 添加 图 层 蒙 版 ， 用 黑色 画笔 在 背景 处 涂抹 ， 隐 藏 背 景 ， 抠 出 模特 。 


步骤 03 ”设置 “色相 /饱和 度 ” 调 整 色彩 


执行 “图 层 > 创 建 齐 贴 蒙 版 ”菜单 命令 ， 把 灰色 和 矩形 之 外 的 模特 图 像 隐 藏 。 此 时 仔细 观察 图 像 可 友 现 ， 模 特 的 手 避 与 拱 干 之 
间 区 域 的 颜色 与 步 又 1 中 确定 的 背景 灰色 不 统一 ， 于 是 使 用 “ 套 论 工具 ”选中 这 些 区 域 的 图 像 ,， 创建“ 色相 /饱和 度 1” 调 整 图 
层 , 打开 “属性 ”面板 ， 辣 左 拖 忠 “饱和 度 ” 疹 块 ， 降 低 图 像 饱 和 度 ， 使 选区 中 的 图 像 色彩 变 淡 。 


步骤 04 ”添加 委 饰 化 纹 


经 过 前 面 几 步 操作 ， 完 成 了 背景 图 像 的 设计 ， 接 下 来 束 是 细节 的 设计 。 打 开 素 材 文件 02.psd， 将 图 像 拖 忠 至 画面 左上 角 ， 
作为 标题 栏 的 装饰 图 案 。 为 了 让 装饰 论 弘 与 背景 相 融 合 ， 为 “ 伦 纹 ”图 层 添加 蒙 版 ， 用 黑色 加 笔 涂 抹 ， 创 建 渐 隐 的 图 像 效 果 。 


步 又 05 ”使 用 “矩形 工具 ”绘制 渐 隐 图 形 


选择 “ 算 形 工具 ”， 人 在 模特 受 旁 绘 制 一 个 昌 色 的 所 形 ， 用 于 输入 商品 的 朱 述 文字 。 绘 制 完 后 友 现 矩形 人 在 灰色 的 育 景 中 显得 很 
突 几 ， 因 此 为 “ 粉 形 2” 图 层 添加 蒙 版 ， 选 择 “ 渐 变 工具 ”， 从 右 同 左 拖 岛 创 建 线 性 渐变 ， 形 成 渐 隐 的 图 形 效果 。 


步骤 06 复制 图 形 并 调整 位 置 


因为 要 输入 的 商品 摘 述 文字 不 止 一 条 ， 所 以 根据 信息 的 数量 连续 多 次 按 下 快捷 键 Ctrl+J， 复 制 出 多 个 窍 形 。 用 “移动 工 


具 ” 把 复制 的 定形 以 错位 排 询 的 方式 放置 在 模特 左 人 出， 再 适当 翻转 息 形 ， 


HO THUD 
不 过 明度 : 100% = 
b 看 ”填充 : 100% = 
OO 了 人 信州 


二 0 拭 形 1 拷 由 2 


四 柜 形 工 持 风 
加 矩形 工 拷 见 3 
"Ee 


» 产品 mm 外 


步骤 07 绘制 圆 形 并 设置 “投影 ”样式 


得 到 更 有 创意 的 布局 效果 。 


确定 了 摘 述 文字 的 位 置 后 ， 接 着 需要 绘制 商品 细节 展开 区 域 。 受 模特 身 旁 的 篮球 的 局 友 ， 这 里 选择 “椭圆 工具 ”， 按 住 


Shift 键 不 放 ， 在 第 一 个 矩形 右 侧 单 击 并 拖 灸 鼠标 ， 绘 制 一 个 白色 的 正 圆 形 。 接 着 执行 “图 层 > 图 层 样式 > 投影 ”菜单 命令 ， 打 
开 “ 图 层 样式 ”对 话 框 ， 在 对 话 框 中 设置 投影 选项 ， 设 置 后 单 击 “ 确 定 ” 按 钮 ， 为 圆 形 添加 投影 ， 让 圆 形 更 有 立体 感 。 


投影 
混合 模式 : | 正片 县 底 
趟 透明 度 (OF 


角度 (A): ， i y [150 | 府 
寓 人 站 1 | 侈 素 
扩展 (R)j: 所 人 


大 Sm | | 人 过 


步骤 08 多 个 图 形 的 复制 与 调整 


连续 按 下 快捷 键 Ctrl+J， 复 制 3 个 日 色 圆 形 。 选 择 “移动 工具 ”， 按 错位 排 询 的 方式 把 复制 的 圆 形 移 到 起 形 上 。 全 此 便 完 成 
了 整个 版 面 的 布局 规划 。 


椭 圆 1 拷 风 3 
剖 m 拷 [ 


六 椭圆 1 拷 见 2 


Ne 梢 圆 1 拷贝 


yi ; 


@ 效果 


步骤 09 用 “直线 工具 ”绘制 线条 


为 了 将 后 面 要 输入 的 文字 的 主 次 区 分 开 ， 需 要 对 细节 进行 划 人 分。 选择“ 直线 工具 ”， 设置 前 景色 为 灰色 ， “粗细 ”为 1 像 
素 ， 然 后 按 住 Shift 键 不 放 ， 在 日 色 和 矩形 中 间 位 置 单 击 并 拖 岛 鼠标， 绘制 线条 。 


趟 ”和 粗 钥 : 1 像素 


步骤 10 ”继续 绘制 线条 


选择 “直线 工具 ”， 在 选项 栏 中 将 “粗细 ”调整 为 2 像素 ， 在 标题 栏 右 侧 单 击 并 拖 岛 鼠标 ， 绘 制 男 一 根 灰 色 线 条 。 


狂 ” 粗 组 : 2 像素 


嘿 


步骤 11 使 用 “椭圆 工具 ”绘制 圆 形 


因为 需要 对 运动 服 的 细节 进行 展示 ， 所 以 需要 确定 运动 服 细节 的 位 置 。 设 置 前 景色 为 Re1、G50、B35， 选 择 “ 李 圆 工 
具 ”， 新建 “ 细 忆 图像” 图 层 组 ， 在 日 色 圆 形 中 间 单 击 并 拖 蝶 幢 标 ， 绘 制 稍 小 的 正 圆 形 。 


步骤 12 复制 图 形 和 运动 服 素 材 


分 别 选择 线条 和 圆 形 所 在 的 图 层 ， 按 下 快捷 键 Ctrl+J 复 制图 形 ， 然 后 用 “移动 工具 ”把 复制 的 图 形 拖 岛 至 相应 的 位 置 。 选 
中 “人 物 ” 图 层 ， 按 下 快捷 键 Ctrl+J 复 制图 层 ， 得 到 “人 物 拷 贝 ” 图 层 ， 将 此 图 层 移 全 “ 顶 圆 1” 图 层 上 面 。 因 为 此 处 是 对 运动 
服 局 部 的 展示 ， 并 不 需要 使 用 图 层 蒙 版 ， 所 以 石 击 图 层 右 侧 的 蒙 版 缩 贞 图 ， 在 弹出 的 快捷 荣 单 中 单 击 “ 删 除 图 层 家 版 ”命令 ， 删 
除 图 层 蒙 版 。 


工人 训 
* | 不] 过 明 度 : 100% = 


步骤 13 ”创建 剪贴 蒙 版 展示 商品 细节 


执行 “图 层 > 创 建 草 贴 蒙 版 ”菜单 命令 ,创建 剪贴 壹 版， 把 圆 形 以 外 的 图 像 隐藏 ， 接 着 使 用 “移动 工具 ” 拖 蝶 图 像 ， 调 整 要 
显示 在 圆 形 中 的 商品 图 像 区 域 。 


步骤 14 ”继续 创建 筋 贴 芝 做 


连续 按 下 快捷 键 Ctrl+J， 复 制 多 个 “人 物 拷贝 ”图 层 ， 然 后 使 用 同样 的 万 法 创建 剪贴 蒙 版 拼 


为 了 展示 商品 不 同 部 位 的 细 刷 ， 
“字符 ”面板 ， 在 面板 中 


合 图 像 。 最 后 还 需要 在 各 细 忆 图片 芳 边 输入 相应 的 拉 u 述 文字 。 在 输入 前 ， 选 择 “ 横 排 文 字 工 具 ”， 打 开 


对 文字 的 属性 进行 设置 。 


字 讨 


Aparajita Regular “= Regular 


t+ (自动 ) 


者 下 


100% 


rr 


步骤 15 ”使 用 “ 横 排 文字 工具 ”添加 文字 


设置 好 文字 属性 后 ， 在 线条 上 单 击 并 输入 细节 摘 述 编号 ， 输 入 后 继续 用 “ 横 排 文字 工具 ”在 画面 中 添加 更 多 的 文字 。 为 了 表 
现 文字 的 层次 天 系 ， 可 以 结合 “字符 ”面板 调整 文字 的 字体 、 字 号 等 属性 ， 得 到 完整 的 商品 细节 质 述 设计 效果 。 


NO T 高 档 而 料 : 


实例 107 彰显 品质 的 女 包 丙 品 搬 述 


| 


于 者 锋 点 
ERSION FEATUBES ET EI, 


NO LE: 


本 NO2 加 宝 册 便 : 
| 


NO3 小 V 侨 设计 : 


举 W 坊 千 订 时 恒 古 到 RPR 碍 询 避 ， 


NO.4 同 此 类 i 
司 回 肝 衣 的 三 下 喇 旺 。 呈 泗 于 

al 

EL 


设计 


本 实例 是 为 某 品 牌 女 包 设计 的 商品 详情 页 ， 画 面 用 包 包 目 身 的 纹理 作为 背景 ， 再 将 包 包 的 细节 进行 放大 显示 ， 针 对 不 同 的 商 


图 添加 相应 的 说 明 信 息 ， 使 包 包 的 卖点 更 加 突出 、 醒 目 。 
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可 调节 五 多 锁 扣 ， 美观 大 气 


步骤 01 ”新建 文件 为 育 景 填 宛 颜色 


启动 Photoshop 程 序 ， 新 建 一 个 文档 ， 由 于 这 里 需要 设置 清 亚 风 格 的 商品 摘 述 图 ， 所 以 先 设置 背景 颜色 。 单 击 工 具 


素 材 随 书 资源 \ 素 材 \13\03.jpg 


随 书 资源 \ 源 文件 \13\ 彰 显 品质 的 女 包 商品 描述 
设计 .psd 


源 文 件 


中 


-水 
只 


的 “设置 前 景色 ”按钮 ， 打 开 “ 拾 色 器 (前 景色 ) ”对 话 框 ， 在 对 话 框 中 将 颜色 设置 为 R250、QG250、B250， 创 建新 图 层 ， 按 
下 快捷 键 Alt+ Delete， 为 背景 填充 颜色 ，。 


步骤 02 复制 手提 包 图 像 为 背景 添加 纹理 


为 背景 填充 头 色 后 ， 发 现 画 面 有 点 单调 。 为 了 让 画面 更 有 质感 ， 且 与 要 表现 的 包 包 主体 更 契合 ， 打 开 素 材 文 件 03.jpg， 把 图 
像 拖 蝶 至 新 建 的 文件 中 ， 得 到 “背景 纹样 ”图 层 ， 将 图 层 “ 不 透明 度 ” 设 置 为 15%， 为 背景 卉 加 纹理 效果 。 


15 加 


1UU we 


步骤 03 用 “和 直线 工具 ”绘制 线条 


为 了 将 标题 与 细节 搞 述 区 分 开 ， 选 择 “直线 工具 ”， 在 选项 栏 中 设置 绘制 模式 为 “形状 ”， 填 死 颜色 为 R100、G100、 


B100，“ 粗 细 ” 为 2 像素 ， 按 住 Shift 键 不 放 ， 在 图 像 项 部 单 击 并 拖 岛 鼠标 ,绘制 一 条 灰色 的 直线 。 


填充 : 了 搓 b: 攻关 相 细 : 2 像素 


步骤 04 ”绘制 矩形 并 对 其 进行 变形 


设置 前 景色 为 R129、G104、B80， 和 选择“ 和 矩 形 工 具 ”， 在 画面 中 单 击 并 拖 忠 姐 标 ， 绘 制 一 个 和 矩 形 ， 为 了 让 绘制 的 图 形 更 有 
创意 ， 可 以 对 它 进 行 变形 ， 选 择 “ 直 接 选 择 工具 ”， 单 击 和 矩形 右 下 角 的 路 径 锚 点 ， 单 击 并 向 左 拖 忠 ， 将 矩 形 转 换 为 梯形 效果 ，。 


步骤 05 复制 梯形 并 绘制 椭圆 线条 


连续 按 下 快捷 键 Ctrl+J， 复 制 多 个 梯形 ， 然 后 用 “移动 工具 ”把 复制 的 图 形 移 公 适当 的 位 置 ， 得 到 不 规则 的 图 形 排 询 效果 。 
为 了 让 复制 的 图 形 显得 更 有 规律 ， 选 择 “ 椭 圆 工 具 ”， 在 选项 栏 中 调整 填充 和 描 边 选项 后 ， 在 画面 右 侧 单 击 并 拖 外 鼠标 ， 绘 制 描 
边 的 椭圆 。 此 时 可 以 看 到 复制 的 梯形 沿 椭 圆 边缘 形成 弧 形 效果 。 


步骤 06 设置 “上 自然 饱和 度 ” 提 高 颜色 鲜艳 度 


再 次 打开 手提 包 素 材 03.jpg 并 将 其 拖 入 新 建文 件 中 。 由 于 原 照 片 中 手提 包 的 颜色 太 暗 淡 ， 为 了 让 手提 包 的 颜色 变 得 更 鲜艳 ， 
执行 “图 像 > 调 整 > 目 然 饱和 度 ” 有 菜 蛙 命令 ， 在 打开 的 对 话 框 中 将 “ 目 然 饱和 度 ” 背 块 向 右 拖 蝶 至 最 大 ， 此 时 可 看 到 提高 目 然 饮 
和 度 后 的 效果 。 


饱和 度 (S): 


执行 “选择 > 色彩 范围 ”菜单 命令 ,打开 “色彩 范围 ”对 话 框 。 由 于 此 处 需要 将 除 包 包 外 的 背景 隐藏 ， 因 此 选用 “吸管 工 
具 ” 在 手提 包 芳 边 的 浅 色 背景 处 单 击 ,调整 选择 范围 ， 设 置 后 单 击 “ 确 定 ” 按 钮 ,创建 选区 


选择 [C): | 过 职 样 赢 色 
档 测 作爱 [D| ” 门 本 地 此 颜色 租 民 ) 
着 色 容 差 (F); 67 


江 周 (Ry): 


i i 


Ta FA dT 
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i 


执行 “选择 > 反选 ”菜单 命令 ， 反 选 选区 ， 在 图 像 窗 口中 可 看 到 选中 了 除 包 包 外 的 大 部 分 背景 图 像 。 单 击 “ 图 层 ” 面 板 中 
按钮 ， 隐 藏 选区 内 的 图 像 ， 抠 出 手提 包 . 


步骤 09 用 “画笔 工具 ”编辑 家 版 


经 过 上 一 步 操作 ， 虽 然 将 部 分 背景 隐藏 了 了 ， 但 还 是 抠 取 得 不 干将。 所 以 选择 “画笔 工具 ”， 将 前 景色 设置 为 黑色 ， 在 手提 包 
外 的 育 景 处 涂抹 ， 将 整个 背景 都 隐藏 起 来 ， 然 后 将 前 景色 设置 为 日 色 ， 在 不 小 心 隐藏 的 手提 包 区 域 涂 抹 ， 以 显示 更 完整 的 包 包 图 
像 。 


步骤 10 ”设置 “USM 饥 化 ” 滤 镜 使 图 像 变 清 


为 了 让 包 包 上 的 纹理 更 加 清晰 ， 按 住 Ctrl 键 不 放 ， 单 击 “ 包 包 ” 图 层 蒙 版 ， 载 入 选区 。 按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 包 
包 图 像 。 执 行 “ 滤 镜 > 锐 化 >USM 锅 化 ”有 菜单 命令 ， 在 打开 的 对 话 框 中 设置 参数 ， 直 到 手提 包 纹 理 变 得 清晰 。 
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步骤 11 设置 “投影 ”样式 为 图 像 添加 投影 


选择 “椭圆 工具 ”， 设 置 前 景色 为 日 色 ， 按 住 Shift 键 不 放 ， 在 梯形 左 侧 单 击 并 拖 蝶 鼠标 ， 绘 制 日 色 的 圆 形 。 绘 制 后 ， 为 了 
表现 出 更 加 立体 的 图 形 效 果 ， 执行“ 图 层 > 图 层 样 式 > 投 影 ”菜单 命令 ,打开 “图 层 样式 ”对 话 框 ,根据 需要 设置 投影 的 各 项 参 
数 ， 设 置 后 单 击 “ 确 定 ”按钮 ， 完 成 投影 的 添加 。 


投影 
结构 


混合 模 式 : | 正片 至 底 加 | 
币 和 要 明度 (0): = |35 |% 


角度 (A): | 、 | [126 ”| 度 站 使 用 全 局 光 (G) 


距 高 ID 三 
扩展 (Rk 本 


小 Sk 6 | 


步骤 12 复制 包 包 素材 创建 剪贴 蒙 版 


经 过 前 一 步 操 作 ， 确 定 了 细节 的 展示 位 置 ， 下 面 把 包 包 图 像 复 制 到 新 建文 件 中 ， 得 到 “ 包 包 细 书 ”图 层 。 为 了 让 男 面 的 癌 色 
更 统一 ， 使 用 “ 目 然 饱和 度 ” 命 令 调整 包 包 颜色 。 执 行 “图 层 > 创 建 齐 由 蒙 版 ”菜单 命令 ,创建 况 贴 蒙 版 ， 拼 合 图 像 。 
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步骤 13 ”完成 更 多 商品 细节 的 展示 


续 使 用 相同 的 万 法 ， 在 画面 中 绘制 更 多 的 圆 形 ， 然 后 把 对 应 的 包 包 图 像 添加 全 圆 形 中 间 位 置 ， 设 置 不 同 的 细节 展示 效果 。 
选择 “ 横 排 文字 工具 ”， 打 开 “ 字 符 ” 面 板 ， 在 面板 中 调整 文字 的 字体 、 大 小 及 颜色 等 选项 ， 为 标题 文字 设置 属性 。 


字 付 
方正 粗 情 商 体 … 


30 局 


100% 100% 
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步骤 14 输入 文字 并 设置 文字 属性 


在 绘制 的 梯形 右上 方 单 击 并 输入 英文 “one”， 为 了 让 输入 的 文字 更 便于 理解 ， 在 英文 “one” 旁边 再 输入 数字 “1”， 然 
后 对 文字 的 字体 、 大 小 加 以 调节 ， 使 输入 的 文字 表现 出 主 次 关系 。 


步骤 15 继续 完成 更 多 描述 文字 的 设计 


选择 “ 构 排 文字 工具 ”， 在 已 输入 的 文字 下 方 继续 输入 文字 ， 输 入 后 根据 版 面 布局 调整 文字 属性 。 应 用 相同 的 方法 ， 在 画面 
中 输入 更 为 详细 的 包 包 细节 摘 述 。 
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实例 108 详尽 的 手链 商品 描述 设计 


本 实例 是 为 一 款 民族 风 的 手链 设计 的 商品 促销 展示 页 面 ， 将 拍摄 的 手链 图 像 与 绘制 的 背景 融合 在 一 起 ， 通 过 将 图 像 与 文字 混 
合 排列 的 方式 ， 使 得 整个 画面 显得 既 简 洁 又 不 失 设 计 感 。 同 时 ， 在 色彩 的 处 理 上 ， 利 用 暗 红 色 和 深蓝 色 搭 配 组 合 ， 草 造 出 一 种 古 
典 的 艺术 氛围 。 
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一 一 一 o 素 ” 材 ”| 随 书 资源 素材 \13\04jpg 


脐 泪 . 黑 玛 政 白 水 晶 琉 璃 手链 ‘ \ RE: 
I ou i , 沽 文件 随 书 资源 \ 源 文件 \13\ 详 尽 
这 2 汪 o2at 的 手链 商品 描述 设计 .psd 
周 长 约 35CM 


黑 玛 淄 、 白 水 易 、 琉 璃 、 镀 14K 真 多 


材质 介绍 大 
一 


Dy, 


状 专 雯 


黑 玛 融 ， 古 朴 但 不 木讷 ， 优 雅 又 不 低调 。 


日 水 十 


白水 晶 是 水 晶 中 最 具 代 表 性 、 数 量 最 大 、 
应 用 最 广 的 宝石 ， 被 称 为 “ 蜡 王 ”。 


A 每 一 苛 琉 璃 部 用 手工 拉丝 上 色 而 成 ， 每 
清 | 一 时 都 深邃 示人 。 琉 璃 的 古村 风格 ， 让 
热爱 民族 风 的 你 感叹 相 见 恨 晚 


步骤 01 绘制 图 形 定义 基调 


AN 


局 动 Photoshop 程 序 ， 新 建 一 个 文件 ， 然 后 用 “起 形 工具 ” 沿 图 像 边缘 绘制 一 个 颜色 为 R223、G218、B212 的 洲 色 丰 形 育 


测 


高 度 (W): 750 || 像素 


高 度 (H): |1522 | | 像素 
分 辩 率 [R): |72 | 像素 /英寸 “= 


颜色 模式 :| RGB 颜色 *| | 8 位 


步骤 02 ”设置 样式 为 图 像 添加 纹理 


为 了 使 绘制 的 背景 表现 出 纹理 感 ， 双 击 图 层 ， 打 开 “ 图 层 样式 ”对 话 框 ， 在 对 话 框 中 勾 选 “纹理 ”样式 ， 然 后 在 右 侧 设置 纹 
理 图 案 。 设 置 后 发 现 图 像 默 认 添 加 浮雕 效果 ， 所 以 勾 选 “斜面 和 浮雕 ”样式 ， 在 最 下 方 将 高 光 的 “不 透明 度 ” 设 置 为 32%， 去 除 
浮 朋 效 果 


贴 紧 原 点 (A) 


9) re |100 “| 能 
深度 (0)， 一 了 .91 | 呢 
反 相 伞 ”” [Yi 与 图 层 链 接 (K) 


高 光 模 式 : | 源 色 忆 
不 透明 度 (0): 

阴影 异 式 : | 正片 要 底 
不 委 明 度 (C): < 


| 设置 为 默认 值 | | 揽 位 为 默认 值 _ 


步骤 03 ”用 “钢笔 工具 ”绘制 虚线 


完成 背景 的 处 理 后 ， 接 下 来 束 是 标题 的 设计 。 选 择 “ 钢 笔 工 具 ”， 在 选项 栏 中 把 绘制 模式 设置 为 “形状 ”， 设 置 与 背景 闸 色 
反 才 较 大 的 红色 作为 摘 边 颜色 ， 然 后 在 画面 项 部 单 击 并 拖 岛 鼠标 ， 绘 制 红色 线条 。 


了 和 产 品 详 情 


Fr ms 组 1 


反 巧 提示 : 更 改 图 形 绘制 模式 


用 “ 拢 形 工 具 “椭圆 工具 ”或 “钢笔 工具 ”绘图 时 ， 需 要 先 在 选项 栏 中 对 绘制 模式 进行 设置 。 单 击 “ 选 择 工具 模式 ”下 拉 
按钮 ， 在 展开 的 下 拉 列 表 中 即 可 选择 并 调整 绘制 模式 。 


步骤 04 用 “ 卸 形 工具 ”绘制 红色 绪 条 


选择 “ 算 形 工具 ”， 在 选项 栏 中 设置 “形状 ”绘制 模式 ， 将 填 宛 色 设置 为 与 上 一 步 绘 制 的 赢 色相 同 的 红色 ， 然 后 在 虚线 下 方 
单 击 并 拖 折 鼠标 ， 绘 制 红色 算 形 。 


3 填充 :| 过 :a 3 点 


步骤 05 使 用 “钢笔 工具 ”绘制 自 定义 图 案 


为 了 突出 标题 文字 ， 骨 次 选择 “钢笔 工具 ”， 人 在 选项 栏 中 设置 工具 选项 后 ， 继 续 在 矩形 下 方 绘制 欧式 花纹 图 案 。 


步骤 06 用 “钢笔 工具 ”绘制 路 径 并 描 边 


选择 “钢笔 工具 ”， 调 整 工 具 选 项 ， 绘 制图 形 ， 并 为 绘制 的 图 形 设置 摘 边 效果 ， 绘 制 后 可 以 看 到 画面 中 完整 的 标题 图 案 效 
果 。 


一 


步骤 07 设置 并 输入 文字 


经 过 前 面 的 操作 ， 完 成 了 标题 栏 图案 的 绘制 ， 接 着 丈 可 以 添加 标题 文字 了 。 选 择 “ 横 排 文字 工具 ”， 在 图 案 中 输入 文字 “ 产 
品 详 情 ”。 为 了 让 文字 与 画面 风格 更 统一 ， 打 开 “ 字 符 ” 面 板 ， 在 面板 中 对 文字 的 属性 进行 调整 。 
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步骤 08 ”继续 用 “ 横 排 文字 工具 ”输入 文字 


打开 “字符 ”面板 ， 在 面板 中 对 文字 的 字体 和 大 小 进行 调整 ， 设 置 稍 小 一 些 的 字号 ， 然 后 在 标题 下 方 输入 “PRODUCT 
DETAILS”。 不 同 的 字号 更 能 突出 文字 的 层次 关系 。 


1 加 | 和 2. T| 9 点 
广 I = 鸣 


二 ;09 
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技巧 提示 : 快速 缩放 文字 


用 文字 工具 在 画面 中 输入 文字 后 ， 如 果 要 更 改 文字 的 大 小 ， 除 了 可 以 应 用 “字符 ”面板 或 选项 栏 中 的 “设置 字体 大 小 ”进行 
调整 外 ， 也 可 按 下 快捷 键 Ctl+ 工 ， 使 用 变换 的 方式 快速 调整 。 


步骤 09 ”将 手链 复制 到 画面 中 
打开 素材 文件 04.jpg， 选 择 “ 移 动工 具 ”， 把 图 像 拖 外 至 新 建 的 文件 中 ， 命 名 为 “手链 1” 图 层 。 为 了 让 手链 图 像 成 为 整个 


画面 中 的 焦点 ， 添 加 图 层 蒙 版 ， 把 手链 旁边 的 多 余 育 景 隐藏 。 


和 详 性 芭 Fr 
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步骤 10 ”复制 手链 图 像 


为 了 让 顾客 看 到 不 同 赢 色 的 手链 效果 ， 可 以 把 “手链 1” 图 层 复制 。 按 下 快捷 键 Ctrl+Jj， 创 建 “ 手 链 1 拷 贝 ”图 层 ， 再 将 复制 
的 手链 图 像 向 右 移 至 另 一 侧 。 


a hn 详 情 


FRODUCT DETAILS / 


步骤 11 设置 “色相 /饱和 度 ” 变 换 颜 色 


创建 “色相 /饱和 度 1” 调 整 图 层 ， 打开“ 属性 ”面板 ,分 别 对 “红色 ”和 “黄色 ”的 “色相 ”做 调整 ， 然 后 用 黑色 男 笔 涂抹 
除 红色 外 的 其 他 的 手链 部 分 ， 实 现 商品 的 局 部 调 色 。 
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步骤 12 ”绘制 指示 线条 并 输入 文字 


为 了 让 输入 的 商品 介绍 信息 指示 更 明确 ， 选 择 “ 钢 笔 工 具 ”， 在 选项 栏 中 设置 工具 选项 ， 在 手链 旁边 绘制 指示 线条 ， 然 后 在 
绘制 的 线条 上 万 输入 与 商品 相对 应 的 文字 说 明 。 


白水 晶 国 珠 直 径 6MM 


步骤 13 ”完成 更 多 指示 文字 的 设置 


继续 使 用 同样 的 方法 ， 向 画面 中 添加 更 多 的 文字 和 续 条 图 案 等 。 


白水 晶 图 球 直入 6MM 


膨 长 的 35MNI 


蓝 琉 璃 图 珠 直径 12MML- 


黄玉 璃 圆 珠 直 径 12MM 


注意 : 手工 测量 ， 会 有 1-2CM 鸣 | 误 整 ， 
请 以 收 到 的 实物 为 准 。 


反 巧 提示 : 复制 图 层 或 图 层 组 


设置 商品 细节 描述 图 时 ， 经 常 需要 复制 图 层 或 图 层 组 。Photoshop 中 复制 图 层 或 图 层 组 的 方法 相同 ， 只 需要 将 图 层 或 图 层 组 
选中 ， 然 后 将 其 拖 避 至 “创建 新 图 层 ”按钮 ， 即 可 快速 完成 图 层 或 图 层 组 的 复制 操作 。 


步骤 14 用 “ 顶 圆 工具 ”绘制 圆 形 


为 了 突出 不 同 大 小 的 珠子 的 区 别 ， 选 择 “ 顶 圆 工具 ”， 在 选项 栏 中 单 击 “ 填 充 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 下 拉 列 表 中 单 
击 “ 渐 变 ” 按钮 ， 设 置 渐变 选项 后 ， 在 文字 “直径 8MM” 上 方 绘制 圆 形 ， 然 后 将 绘制 的 圆 形 复制 ， 并 调整 其 大 小 。 
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步骤 15 ”使 用 “ 息 形 工具 ”绘制 方形 


确定 商品 详情 文字 的 输入 位 置 后 ， 新 建 “ 组 2” 图 层 组 ， 用 “ 目 形 工具 ”在 画面 中 间 位 置 绘制 一 个 摘 边 的 和 矩形 效果 。 


注意 : 手工 测量 ， 会 有 1=2CMI 的 误差 ， 
请 以 收 到 的 实物 为 准 


步骤 16 ”继续 绘制 图 形 并 输入 文字 


为 了 增强 图 形 的 整体 效果 ， 选 择 “钢笔 工具 ”， 在 和 炬 形 的 左上 角 绘 制 一 个 深 灰 色 的 三 角形 ， 再 把 绘制 的 三 角形 复制 ， 移 到 矩 


形 的 另外 3 个 角 位 置 。 结 合 “ 窍 形 工具 ”和 “ 棋 排 文字 工具 ”， 在 前 面 创 建 的 中 形 中 间 位 置 绘制 红色 的 小 矩形 ， 并 输入 手链 的 商 
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步骤 17 复制 图 层 组 更 改 文字 描述 信息 


将 “组 2” 图 层 组 复制 ， 将 复制 的 对 象 向 右 移动 ， 然 后 调整 图 层 组 中 的 图 形 和 文字 信息 ， 完 成 商品 主要 信息 的 输入 。 


:胭脂 泪 . 黑 玛 瑞 自 水 晶 琉 璃 手链 
心 语 首饰 
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zj 机 黑 玛 瑞 、 自 水 晶 、 琉 璃 、 乌 1 水 真 金 2 : 
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步骤 18 ”复制 标题 栏 更 改 标题 文字 


经 过 前 面 的 操作 ， 完 成 了 商品 详情 的 展示 ， 接 下 来 开始 对 商品 的 材质 特点 进行 设计 。 创 建 “ 材 质 介绍 ”图 层 组 ， 把 前 面 绘制 
的 标题 图 案 复 制 到 此 图 层 组 ， 然 后 用 “ 横 排 文字 工具 ”在 标题 栏 中 输入 文字 。 
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步骤 19 使 用 “和 窍 形 工具 ”绘制 图 形 


为 了 确定 材质 图 像 的 摆 放 位 置 ， 设 置 前 景色 为 R186、G22、B22， 选 择 “矩形 工具 ”， 在 标题 左下 方 绘制 一 个 红色 的 矩形 。 
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步骤 20 ”复制 手链 素材 并 锐 化 图 像 


再 次 打开 手链 素材 图 像 ， 用 “移动 工具 ”将 其 拖 暇 至 新 建 的 文件 中 ， 命 名 为 “手链 2” 图 层 ， 将 访 图 层 创建 为 智能 对 象 图 
层 。 为 了 让 手链 细节 更 清晰 ， 执 行 “ 滤 镜 > 锐 化 >USM 锐 化 ”菜单 命令 ， 设 置 滤 镜 选项 ， 锐 化 图 像 。 


数 旱 [A): 50 | 


丰 芭 [RNI: 3.9 


步骤 21 ”创建 剪贴 蒙 啤 隐 藏 图 像 


锅 化 图 像 后 ， 需 要 把 不 需要 突出 表现 的 部 分 隐藏 。 执 行 “ 图 层 > 创 建 剪 贴 蒙 版 ”菜单 依 令 ， 创 建 剪 贴 蒙 版 ， 将 算 形 外 的 其 他 
商品 图 像 隐藏 起 来 。 


步骤 22 输入 文字 


选择 “ 棋 排 文字 工具 ”， 选 择 较 粗 的 方正 大 标 宋 作为 主 文字 字 体 ， 人 在 手链 旁边 单 击 并 输入 材质 “ 黑 玛瑙 ”。 为 了 让 文字 的 层 


次 天 系 更 突出 ， 调 整 文字 字体 和 颜色 等 ， 继 续 输 入 更 多 摘 述 文字 。 


去 芒 坪 


黑 玛 玉 


黑 玛 玉 ， 古 朴 但 不 木讷 ， 优 雅 又 不 低调 。 


步骤 23 继续 完成 更 多 图 形 及 文字 的 设计 


由 于 这 里 的 手链 所 使 用 的 材质 并 不 止 一 种 ， 为 了 表现 更 多 的 材质 特征 ,将 “组 4” 图 层 组 复制 , 创建 “组 4 拷贝 ”和 “组 4 楼 
贝 2” 图 层 组 。 根 据 版 面 需要 调整 图 层 组 中 的 图 像 位 置 ， 并 根据 展示 的 细节 设置 相关 的 文字 信息 ， 完 成 本 实例 的 制作 。 


四 玛 玉 


重 导 二 。 士 标 蛋 平 订 西 ， 导 一品 平 区 衣 。 


半 玛 天 


量 国 量 。 本 是 全 平市 证 ， 二 王 呈 于 全 网。 


组 4 拷贝 2 | 山 国 昌 8 
组 4 拷贝 从 


组 4 


实例 109 ”多 彩 的 美甲 商品 描述 设计 


本 实例 是 为 某 品 牌 指甲 油 设 计 的 商品 摘 述 页 面 ， 图 像 中 为 了 突出 指甲 油 皂 色彩 鲜亮 、 保 持 时 间 长 久 等 优 操 ， 将 指甲 油 瓶 抠 取 
出 来 放置 在 画面 的 中 间 位 置 ， 并 结合 相关 的 文字 加 以 补充 说 明 。 此 外 ， 为 了 便于 顾客 了 解 商 品 的 具体 效果 ， 在 画面 底部 展示 了 涂 
抹 指 甲 油 后 的 指甲 效果 。 画 面 中 鲜艳 的 色彩 搭配 既 符合 女性 的 审美 特征 ， 也 增强 了 画面 的 表现 力 。 


Suays ays 10: 


保持 3 天 左右 保持 1 天 左右 
特点 功效 


束 材 随 书 资源 \ 素 材 \13\05、06.jpg 


随 书 资源 \ 源 文件 \13\ 多 彩 的 美甲 商品 描述 
设计 .psd 


源 文件 


放心 的 可 旭日 批 型 甲 油 = 纯 水 + 水 性 袁 氨 脂 + 天 然 色 浆 ， 孕 妇 儿 重 5 
松 整 片 简 去。 不 合围 醋 、 甲 茶 、 塑 化 齐 等 有 害 物 质 


步骤 01 复制 并 抠 取 指甲 油 瓶 图 像 


局 动 Photoshop 程 序 ， 新 建 一 个 文件 ， 打 开 素 材 文 件 05.jpg， 把 照片 拖 岛 至 新 建 的 文件 中 。 由 于 受到 担 摄 环境 的 影响 ， 背 
景 闫 色 太 上 暗 了 ， 也 不 是 很 好 看 ， 所 以 用 “橡皮 擦 工具 ”把 照片 的 原 背 景 擦 掉 ， 使 画面 显得 更 为 干净 。 


步骤 02 设置 “色相 /饱和 度 ” 去 除 杂 色 


按 下 快捷 键 Ctrl+ + ， 适 当 放 大 图 像 ， 可 以 看 到 因为 拍摄 原因 ， 指 甲 油 瓶 的 黑色 瓶 关 上 出 现 了 监 色 的 反光 ， 影 响 了 画面 的 整 
体 效 果 。 因 此 创建 “色相 /饱和 度 1” 调 整 图 层 , 打开 “属性 ”面板 ， 在 面板 中 选择 “ 蓝 色 ”， 把 “饱和 度 ” 滑 块 同 左 拖 岛 至 - 
100 人 位置， 去掉 赣 色 的 反光 。 


| 本 相 色相 /饱和 度 


而: 自 定 


步骤 03 ”调整 “色相 /饱和 度 ” 


由 于 原 照 片 中 指甲 油 瓶 的 颜色 偏 灰 ， 与 实物 颜色 相 帮 较 大 ， 所 以 需要 对 饱和 度 加 以 提升 。 创 建 “色相 /饱和 度 2” 调 整 图 层 ， 
打开 “属性 ”面板 ， 先 对 整体 饱和 度 进行 设置 ， 将 “饱和 度 ” 背 块 向 右 拖 岛 至 +14 位 置 ， 表 选择 “红色 ”， 用 于 调整 指甲 油 皂 的 
颜色 ， 分 别 向 右 拖 忠 “色相 ”“ 饱 和 度 ” 和 “明度 ” 滑 块 。 


晤 EJ 色相 /饱和 和 度 转世 色相 /饱和 度 


步骤 04 ”继续 调整 “色相 /饱和 度 ' 


为 了 使 照片 中 每 个 指甲 油 撼 的 颜色 都 变 得 更 加 鲜 格 ， 继 续 在 “属性 ”面板 中 对 色相 /饱和 度 进行 调整 。 分 别 选择 “ 绿 
色 ”“ 蓝 色 ” “青色 ”和 “洋红 ”选项 ， 然 后 对 选中 颜色 的 “色相 ”“ 饱 和 度 ” 进 行 相应 的 设置 。 


围 也 色相 /饱和 度 围 也 色相 /饱和 度 转 中 色相 /饱和 度 


= 
昌 溢 了 I 
名 相 : 


步骤 05 设置 “ 色 阶 ”增强 层次 感 


经 过 上 一 步 操 作 ， 指 甲 油 瓶 的 颜色 虽然 变 鲜 攀 了 ， 但 是 因为 对 比 度 不 强 ， 洽 子 的 质感 没有 突显 出 来 。 因 此 创建 “ 色 阶 1” 调 
整 图 层 ， 打开“ 属性 ”面板 ， 同 右 拖 灸 黑色 滑 块 ， 使 照片 中 指甲 油 瓶 的 上 暗部 区 域 变 得 更 瞳 ， 表 同 左 拖 岛 灰色 滑 块 ， 使 中 间 调 部 分 
变 暗 ， 设 置 后 在 图 像 窗 口中 可 看 到 更 加 内 亮 有 层次 的 商品 效果 。 
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步骤 06 纵 制 图 形 并 创建 草 贴 壹 版 


添加 主 商 品 指 甲 油 尊 后 ， 为 了 让 顾客 更 直观 地 感受 到 指甲 油 的 效果 ， 还 需要 添加 涂抹 指甲 油 后 的 手指 甲 效果 。 选 择 “ 和 矩形 工 
具 ”， 在 瓶子 下 方 绘制 一 个 黑色 的 和 矩 形 ， 打 开 素 材 文 件 06.jpg， 把 打开 的 照片 复制 到 和 矩 形 上 。 执 行 “图 层 > 创 建 草 贴 蒙 版 ”菜单 
命令 ,创建 勇 贴 蒙 版 ， 控 制 显 示 沁 围 。 


步骤 07 创建 “ 黑 日 ”调整 图 层 转换 颜色 


本 实例 主要 是 表现 指甲 油 的 效果 ， 所 以 需要 对 涂抹 指甲 油 的 素材 图 像 颜色 进行 调整 。 创 建 “ 黑 日 1” 调 整 图 层 ， 在 打开 
的 “属性 ”面板 中 单 击 “ 目 动 ” 按 钮 ， 目 动 调整 颜色 值 ， 去 挥 彩 色 ， 让 画面 色彩 区 得 更 简单 。 


[ 年 攻 黑白 
珊 有 :点 从 值 


步骤 08 用 “渐变 工具 ”编辑 图 像 


由 于 此 处 只 需要 对 手指 部 分 的 赢 色 进 行 去 除 ， 以 突出 捐 甲 油 效果 。 因 此 ， 选 择 “ 潭 变 工 具 ”， 在 选项 栏 中 单 击 渐变 条 石 侧 的 
下 拉 按 钮 ， 在 展开 的 “渐变 ” 拾 色 器 中 蛙 击 “ 黑 ， 日 渐变 ”， 将 妃 标 移 全 指甲 图 像 下 方 ， 从 下 往 上 拖 岛 线性 新 变 ， 当 拖 忠 至 合适 
位 置 后 释放 鼠标 ， 还 原 上 半 部 分 的 指甲 的 赢 色 。 


[ 国 黑白 1 


[en | 


步骤 09 使 用 “和 矩形 工具 ”绘制 绿色 和 矩 形 


处 理 指甲 图 像 后 ， 还 需要 输入 商品 的 介绍 信息 。 为 了 迎合 指甲 油 环保 健康 的 特质 ， 把 前 景色 设置 为 绿色 R65、G94、B2， 选 


择 “ 赴 形 工 具 ”， 在 手 捐 甲 下 方 单 击 并 拖 擅 鼠标 ， 绘 制 一 个 绿色 起 形 ， 并 适当 调整 其 混合 模式 。 


100% 


100%, 


步骤 10 ”使 用 “ 目 定 形状 工具 ”绘制 化 水 图 案 


选择 “ 目 定 形状 工具 ”， 单 击 “ 形 状 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 “形状 ” 拾 色 器 中 蛙 击 “模糊 上 后 2 边框 ”形状 ， 然 后 在 和 拭 
形 上 单 击 并 拖 灸 鼠标， 绘制 一 米 日 色 的 小 花 图 案 。 


步骤 11 设置 并 输入 文字 


选择 “ 横 排 文字 工具 ”， 在 绘制 的 花 米 图 案 旁 边 输入 文字 “ 魔 指 世界 ”， 打 开 “ 字 符 ” 面 板 ， 对 文字 属性 进行 设置 。 为 了 万 
便 顾 客 阅 读 ， 将 文字 的 字体 设置 为 较 规整 的 方正 黑体 ， 文 字 的 颜色 设置 为 日 色 。 


步骤 12 ”输入 文字 并 对 齐 文本 


继续 使 用 “ 模 排 文字 工具 ”在 图 形 上 完成 更 多 文字 的 输入 ， 输 入 后 感 党 画面 的 视 竞 中心 不 够 突出 。 打 开 “ 段 洛 ” 面 板 ， 单 击 
面板 中 的 “居中 对 齐 文本 ”按钮 ， 以 居中 对 章 的 方式 安排 输入 的 文字 。 


风 可 末日 搜 型 甲 油 = 纯 才 + 侠 妇 儿童 可 以 放心 使 用 ， ph 部 除 时 无 需 洗 甲 水 ， 可 轻 
松 正 片 科 去 。 不 售 甲 酶 、 甲 革 、 侯 化 剂 等 有 害 物质 ， 专 业 检测 中 心 出 具 认 证 报告 。 
和 Pobreti yin * re ral colioranis, 
women, ch 3 


步骤 13 ”绘制 圆 角 和 矩形 添加 文字 


为 了 便于 顾客 掌握 所 甲 油 的 颜色 信息 ， 可 以 在 对 应 的 指甲 油 瓶 下 方 绘制 颜色 相近 的 图 像 并 附 上 文字 说 明 。 选 择 “吸管 工 
具 ” 在 监 色 的 瓶子 中 间 位 置 单 击 ， 将 前 景色 设置 为 R77、G204、B254， 选 择 “ 圆 角 起 形 工具 ”， 在 瓶子 下 绘制 一 个 监 色 的 圆 角 
答 形 ， 选 择 “ 横 排 文 字 工具 ”， 在 圆 角 起 形 上 输入 文字 “清新 监 ”。 
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步骤 14 ”继续 绘制 图 形 输入 文字 
继续 使 用 同样 的 方法 ， 在 另外 几 个 指甲 油 瓶 下 方 绘制 对 应 颜色 的 圆 角 窍 形 ， 然 后 输入 相应 的 颜色 信息 。 
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步骤 15 ”继续 进行 文字 与 图 形 的 绘制 
使 用 同样 的 方法 ， 运 用 图 形 绘制 工具 和 “ 横 排 文字 工具 ”在 画面 上 半 部 分 的 空 日 区 域 添加 更 多 的 商品 摘 述 信息 ， 完 成 本 实例 


的 制作 。 
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实例 110 “指示 更 多 细节 的 商品 描述 设计 


本 实例 是 为 某 品 牌 女 鞋 设计 的 商品 拉 述 图 ， 在 设计 时 使 用 日 色 作为 背景 ， 先 在 画面 中 展示 鞋子 的 整体 效果 ， 并 设置 具体 的 代 
号 、 材 质 、 尺 码 等 基本 信息 ， 再 将 鞋子 的 细 蔬 放大， 通过 图 形 与 文字 对 商品 细节 进行 点 缀 和 说 明 ， 达 到 轻快 、 简 洁 的 效果 。 
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随 书 资源 \ 素 材 \13\12、13.jpg 


随 书 偶 源 \ 源 文件 \13\ 捐 示 轩 多 细 


三 的 商品 手 述 设计 .psd 


设计 分 析 


` 设计 要 点 01: 女 鞋 商品 信息 区 域 中 的 尺码 、 贷 号 等 信息 内 容 较 多 ， 为 了 清晰 地 展示 出 信息 ， 同 时 将 不 同 信 息 区 分 开 ， 使 
用 “矩形 工具 ”绘制 了 多 个 矩形 放置 文字 ， 让 顾客 阅读 起 来 更 轻松 。 


“ 设计 要 点 02: 为 了 让 鞋子 的 细节 与 文字 联系 更 加 紧密 ， 在 设计 时 使 用 线条 进行 修饰 ， 既 增强 了 设计 感 ， 也 使 画面 更 为 紧 


` 设计 要 点 03: 采用 局 部 图 解 的 方式 ， 将 鞋子 的 重要 细节 部 分 单独 展示 出 来 ， 让 顾客 更 清楚 鞋子 的 特点 ， 是 否 是 自己 所 需要 
的 商品 。 


版 式 分 析 


本 实例 分 为 上 、 下 两 个 部 分 ， 上 半 部 分 采用 左 图 右 文 的 方式 对 商品 进行 详细 介绍 ， 下 半 部 分 则 使 用 多 个 圆 形 对 版 面 进行 分 
隔 ， 在 主 商品 周围 形成 圆 形 的 弧 形 ， 能 够 更 好 地 引导 顾客 的 视线 ， 同 顾客 展示 更 多 的 鞋子 细节 。 


配色 方案 


为 了 使 顾客 能 够 更 为 清和 蒂 、 直 观 地 看 到 鞋子 的 整体 和 局 部 效果 ， 画 面 采用 日 色 作 为 育 景色 ， 己 浅 色 的 高 跟 鞋 风格 更 加 统一 。 
此 外 ， 为 了 增强 画面 的 色彩 表现 力 ， 在 标题 图 案 上 使 用 较 鲜 艳 的 红色 与 蓝 色 搭配 ， 为 单调 的 画面 增加 了 色彩 ， 使 得 画面 简单 又 不 
失 美 感 。 


技术 要 点 
. 结合 “ 拢 形 工具 ”和 “ 横 排 文字 工具 ”进行 标题 栏 的 设计 。 


` 把 鞋子 素材 12.jpg 复 制 到 画面 上 半 部 分 ， 使 用 “钢笔 工具 ” 抠 出 高 跟 鞋 ， 得 到 更 干净 的 画面 ， 并 在 右 侧 输 入 对 应 的 商品 介 


绍 信 息 0 


-用 “钢笔 工具 ”将 鞋子 素材 13.jpg 抠 出 并 复制 到 画面 下 半 部 分 ， 应 用 “椭圆 工具 和 “和 珑 形 工具 绘制 图 形 ， 通 过 创建 前 


贴 莹 版 进行 商品 细节 的 展示 。 


实例 111 ”突出 品牌 文化 的 商品 描述 设计 


本 实例 是 为 某 品 牌 女 鞋 设计 的 商品 详情 下， 画面 中 利用 灰 度 图 像 和 彩色 图 像 进行 搭配 ， 色 彩 之 间 的 对 比 让 品牌 文化 更 加 突 
出 ， 同 时 搭配 相 天 的 文字 信息 ， 为 顾客 呈现 出 完整 的 品牌 视 总 传播 效果 。 


LOMPANY PROFILE 


3APPHIRE ( 昔 宝 石 ) 让 驻 ， 人 充 生 于 以 一 天 的 保 计 和 
精湛 的 制作 工艺 引领 世界 畦 业 发 展 的 俄罗斯 ， 其 lL/ “传承 
贵族 经 典 ， 汲取 时 尚 精华 ， 给 萄 魅力 人 生 ” 为 品牌 理念 ， 
将 看 华 与 阐 约 融 为 一 体 ,让 妇 鞋 呈现 出 有 时 阅 、 局 雅 相 六方 
的 特色 上 殖 力 。 作 为 欧美 时 尚 圈 一 线 妇 畦 品 沙 ， 蓝 宝石 提出 
了 驻 子 趟 怡 沦 为 服饰 的 附 唐 概 已 ，“ 每 观 尾 部 迁 出 独特 的 
局 品 ”， 以 鞋子 的 欧洲 贵族 文化 和 现代 时 尚 气息 ， 让 衣 饰 
为 其 措 配 。 


本 日 lw 贡 加 三 间 几 疏 刘 本 看 捕 捷 | 本 权 和 


VELOPMENT PROCESS 


5sAPPHIRE 【 监 宝石 ) 友 革 ， 其 品牌 全 今 已 经 走 过 了 半 人 小 多 世纪 ， 从 其 品牌 点 展 的 全 过 程 ， 我 
们 可 以 元 见 其 之 所 以 成 为 欧美 时 疝 圈 一 流 女 鞋 品牌 的 原因 。 


SAPPHRE 4 这 定 石 这 ,4 中 国 市 二 ， 
中 于 六 州 理 宝石 专 志 楠 的 设置 , 向 国人 
展示 ,村 了 蔓 衬 百 专 在 的 酸 玫 癌 | 只 吉 风 
情 ， 国 从 对 莹 宝石 志 圣 的 青 梧 ， 禹 让 丽 
在 跨 洁 .， 世 广州 开间 本 十 ” 泗 寺 LJ 于 干 


对 可 现在, 茜 宇 二 妈 肝 已 经 在 太 灾 其 
一 市 安 管 时 ,后 网 上 下 于 石 天 凤 
恬 疾 砧 也 是 动 刘 立 ， a 


大 学 毕业 后 的 翰 奇 开 ,在 马德里 JT 设 | 
了 自己 的 设计 师 工 作 事 ， 专 光量 齐 笛 1 
宗 受 计 、 副 作 娃 子 . 关注 其 经 子 诈 如 1 
为 5APPHIRE [王室 五) ， 畸 油 避 工 | 
; 于 性 襄 计 前 看 臣 ,过 前 | 林 太 们 的 唐 。! 
江 ， “与 观 析 部 清唱 骂 特 克 高 帆 ” ， 1 

! 
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SAPPHITE 1 吾 蝇 石 | 虐 王 岂 沪 了 民 
马 断 里 军 “请 半 寥 儿 里 二 


193 /年 


1 
1 
1 
| 
遍 的 艺术 设计 天 中 , 他 和 用 在 江 术 | = 
本 1 译 过 中 沾 客 世纪 3 亲生 展 ， SPPHIRE【 五 呈 
.年 便 古 沪 于 开 力 ， 补 地 里 军 陆 “1 = Ed 
en 本 1 守 研 四 团队 ， 夺 要 帖 了 了 认 记 芹 名 年 经 设 iH 钙 的 
本 大 lo 辐 ,他 5APPHIRET 区 齐 石 ) 女 对 ,在 便 率 二 


I 
本 上 人 十 必 寺 的 吉 笠 工具 来 驻 可 名 子 \ 
. 
1 
i 
si 1 戎 的 于 不 上 , 中 具有 了 车 家 着 周 的 芒 力 ,58P 
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I 
I 
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PHIRF f 至 宣 石 ) 在 世界 同 基 上， 日 首 于 显 届 中 
特 气 大 , 导 昭 欧 章 轩 沿 覃 的 广汉 关注 


志江 
pF 

i 和 

rr 


5BPHIRE [ 蕊 宝石 ) 创 时 A 
| 名 布 守土 主 于 各 和 路 时 fri， 
1 入 中 训话 子 表 理 击 入 辣 江 入. 


21 世 纪 


BPPHIRE 在 和 
到 国际 最 新 的 时 尚 元 喜 
标 合 性 时 日 ] 呈 至 当 | 攻 
/精致 的 懒 工 和 精 选 的 材 忆 


E: ED He 局 秩 


BRAND FEATURES 


AND POSITIONING 


SAPPHIRE ( 蓝宝石 ) 女 壮 ， 紧 跟 国际 时 尚 潮流 ， 全球 同 步 推 出 时 尚 畦 款 ， 它 的 款 型 涵盖 了 低 平 路 


中 眼 ， 高 艰 和 超 高 跟 款 形 ,直言 18-45 光 年 龄 段 的 所 有 玄 性 ， 固 此， 无 论 是 育 莹 风月 的 纯情 话 涛 ， 还 
四 村 当 氛 融 | 二 + T ‘PEPEHIRE 蓝 宗 下 上 诗 二 | 有 ; 仁 币 站 后 三 上 i 是 Tr yj 转 1 本 而 


| | 加 在 -| I i 甩 切 了 用 和 | CE ' “站 昌文 = 十 上 '] 硬 —¥| em bs 3 eile 


材 随 书 资源 \ 素 材 \13\14.jpg 一 17.jpg 


随 书 资源 \ 源 文件 \13\ 突 出 品牌 文化 的 商品 描述 
设计 .psd 


源 文 件 


设计 分 析 


` 设计 要 点 01: 将 文字 的 字体 进行 多 样 化 处 理 ， 并 与 图 形 相 搭 配 ， 得 到 更 具有 艺术 感 的 标题 栏 。 


“ 设计 要 点 02: 将 照片 的 颜色 处 理 为 灰色 ， 突 出 了 品牌 的 历史 感 ， 同 时 利用 色彩 将 设计 元 素 的 层次 关系 突显 出 来 。 


- 设计 要 点 03: 将 品牌 的 发 展 历史 以 视 沉 化 的 坐标 轴 方 式 表现 出 来 ， 为 顾客 留 下 直观 的 品牌 印象 。 


版 式 分 析 


本 实例 在 布局 上 较为 灵活 ， 画 面 通过 图 像 作 引 导线 ， 对 和 版面 中 的 各 个 区 域 进行 分 隔 ， 并 利用 工整 的 文字 设计 ， 让 画面 在 错 洛 
有 致 的 同时 不 会 给 人 市 来 凌乱 的 感受 。 


万 亲 


本 色 


本 实例 在 配色 时 ， 为 了 突出 鞋子 品牌 您 久 的 历史 ， 用 浅黄 色 作 为 背景 色 ， 同 时 在 画面 中 利用 无 彩色 和 有 彩色 的 对 比 差异 ， 深 
化 了 品牌 文化 ， 使 整个 设计 显得 更 有 创意 。 


未 - 丰 西 占 


Bo 心 


. 使 用 “移动 工具 ”把 拍摄 的 素材 照片 复制 画面 中 ， 通 过 创建 剪贴 蒙 版 把 多 余 的 图 像 隐藏 。 
用 “ 横 排 文字 工具 ”在 图 像 旁 边 输 入 文字 ， 为 了 突出 文字 的 主 次 关系 ， 对 文字 的 字体 、 大 小 、 颜 和 色 进 行 调 整 。 


:使 用 图 形 绘 制 工具 在 图 像 中 绘制 图 形 ， 完 善 整体 效果 。 


实例 112 ”简洁 明快 的 售后 服务 描述 设计 


本 实例 是 为 某 店 铺设 计 的 售后 服务 摘 述 页 面 ， 为 了 方便 顾客 阅读 购买 商品 的 整个 服务 流程 ， 让 顾客 知道 当 购 买 商 品 后 遇 到 | 质 
量 、 色 差 、 友 货 等 问题 时 ， 如 何 能 够 在 最 快 、 最 短 的 时 间 内 解决 问题 ， 在 画面 中 使 用 不 同 颜色 的 图 形 来 突出 展示 ， 画 面 划分 显得 
更 为 明确 、 精 细 。 


我 们 是 正规 三家， 产品 质量 都 是 有 保证 的 ， 每 一 笔 订单 发 货 前 我 们 都 会 仔细 的 检查 ， 但 是 百 密 总 会 有 一 政 的 时 
懂 ， 一 个 套装 有 好 几 十 忻 东西 偶 有 检查 不 到 的 地 方 ， 也 请 亲 们 甸 甸 理解 ， 并 在 收取 后 24 小 时 内 拍 眼 和 我 们 联系 ， 我 
们 承诺 凡是 质量 问题 ， 确 认 后 一 律 免费 退换 货物 


我 们 聘请 的 都 是 有 多 年 专业 包装 经 验 的 师傅 ，999% 的 情况 下 不 会 发 生 破 损 ， 万 一 有 破损 ， 也 请 不 要 担心 ， 签 收 
后 24 小 时 内 拍照 和 我 们 联系 ,我 们 会 在 24 小 时 内 为 您 补 发 ! 请 不 要 因此 破损 问题 而 拒 收 产品 ， 这 样 造成 的 快递 运费 
， 我 们 实在 是 无 法 承担 。 


我 们 的 图 片 都 是 实物 拍摄 ， 为 了 让 亲 们 更 直观 的 了 解 到 产品 的 颜色 ， 已 经 尽量 将 色差 调 到 了 最 小 。 


I 1 


正常 情况 下 拍 下 后 24 小 时 内 发 货 。 


我 们 一 般 发 国 通 和 EMIS 大 部 分 地 区 3-6 天 内 到 货 ， 偏 远 地 区 7-10 天 内 到 货 ， 由 于 每 个 地 区 的 快递 公司 服务 质量 
不 同 ， 本 店 无 法 保证 当地 快递 一 定 让 您 百分之百 满意 ， 如 快递 公司 的 质量 不 满意 ， 请 及 时 和 我 们 联系 ， 我 们 将 全 力 
配合 您 户 踪 与 查询 ， 请 不 要 因为 快递 的 原因 而 把 责任 归 短 于 我 们 。 

本 商品 为 易 酬 物品 ， 包 装 比较 复杂 ， 义 比较 重 ， 利 润 也 是 相当 低 的 ， 请 亲 们 多 多 理 解 ， 不 要 再 三 和 我 们 砍 运 用 
了 ， 我 们 实在 是 贴 不 起 啊 | 


ua 2 Tt 这 


挑选 您 喜欢 的 宝贵 ， 拍 下 付款 到 支付 宝 ， 收 到 货款 后 我 们 会 尽 收 到 宝贝 后 ， 请 务必 
单 件 直接 购买 ; 多 件 放 入 ”如 需要 银行 汇款 ， 请 联系 ” 快 安 排 为 您 发 货 ， 请 耐心 ”与 快递 员 当面 验 货 后 再 等 
购物 车 合并 购买 客服 。 等 待 ， 


i 


夫 材 随 书 资源 \ 素 材 \13\07.psd 一 11.psd 


随 书 沉 产 \ 源 文件 \13\ 简 涪 明快 的 售 


源 文件 后 服务 描述 设计 .psd 


设计 分 析 


“ 设计 要 点 01: 画面 中 用 简单 的 卡通 图 案 代 替 文字 信息 ， 增 加 了 图 像 的 表现 力 ， 方 便 观 者 更 直观 地 感受 专业 的 售后 服务 。 


` 设计 要 点 02: 在 图 像 下 方 用 不 同 顾 色 的 矩形 突显 具体 的 关于 商品 质量 、 破 损 、 色 差 等 问题 的 解决 和 处 理 方法 ， 为 顾客 免 去 
后 顾 之 忧 。 


“ 设计 要 点 03: 通 面 中 心 的 文字 通过 不 同 顾 色 与 下 方 的 图 形 区 分 开 ， 增 强 了 文字 的 可 读 性 。 


版 式 分 析 


本 实例 的 版 陈设 计 使 用 不 同 颤 色 的 矩形 对 商品 质量 、 破 损 、 色 差 等 昔 见 问题 进行 分 隅 ， 在 每 组 信息 中 ， 使 用 黑 认 的 元 对 齐 廊 
陈 安 排 文字 ， 帮 助 顾 客 解 决 商品 购买 过 程 中 的 各 类 问题 。 


为 了 让 单调 的 商品 售后 问题 变 得 更 有 趣味 性 ， 本 实例 在 画面 中 运用 了 多 种 不 同色 相 的 颜色 进行 搭配 ， 通 过 在 画面 中 绘制 各 种 
不 同 颜色 的 圆 角 炬 形 来 表现 关于 商品 质量 、 商 品 色差、 商品 友 货 等 问题 的 解决 方案 ， 增 强 顾 客 的 信任 感 ， 进 而 让 顾客 能 够 更 放心 
地 购买 商品 。 


技术 要 扣 
使用“ 圆 角 撼 形 工具 在 画面 中 绘制 图 形 ， 利 用 “移动 工具 把 相关 的 矢量 图 标 复制 到 绘制 的 圆 角 撼 形 中 。 
使用“ 横 排 文 字 工 具 在 图 形 上 输入 文字 ， 并 根据 版 面 调 整 输入 文字 的 大 小 、 颜 色 等 。 


利用“ 自 定形 状 工具 绘制 白色 的 箭头 ， 清 晰 地 表达 商品 的 购买 流程 。 


实例 113 “复古 质感 的 售后 服务 流程 设计 


在 商品 细节 描述 区 ， 除 了 要 展示 商品 的 细节、 功效 外 ， 还 需要 将 网 店 购物 流程 、 退 换 货 流程 等 添加 到 描述 区 。 本 实例 即 是 为 
某 店铺 设计 的 售后 服务 流程 图 ， 画 面 选择 了 具有 复古 风格 的 图 像 作为 背景 图 像 ， 通 过 文字 与 图 形 的 完美 搭配 ， 同 顾客 完整 地 展示 


了 整个 流程 。 


SERVICE 


关于 色差 
所 有 商品 图 片 均 为 100% 实 物 拍摄 ， 由 于 灯光 ， 显 示 器 等 色彩 偏差 及 个 人 对 色彩 的 感知 等 不 同 | 
国 素 ， 导 致 的 实物 与 图 片 有 略微 的 偏差 ， 请 以 收 到 的 实物 为 准 。 


关于 发 村 
如 果 需 要 我 们 提供 商品 发 票 ， 请 在 提交 订单 与 在 线 客服 确认 需要 发 票 并 填写 发 票 抬头 ， 发票 
抬头 不 能 为 空 ; 发 票 类 型 建议 选择 与 实际 商品 相对 应 的 类 型 ， 以 便 更 好 的 保障 您 的 权益。 


本 店 所 有 商品 都 支持 “7 天 无 理由 退换 货 ”， 如 在 收 到 产品 后 不 满意 ， 请 您 及 时 与 我 们 取得 
联系 。 在 原 包装 及 配件 完整 齐全 的 情况 下 ， 即 可 办 理 退换 货 。 ] 


关于 发 货 
正常 情况 下 ， 我 们 会 在 您 付款 成 功 后 的 24 小 时 之 内 安排 发 货 〈 大 促 期 间 除 外 ) 。 | 


给 予 评价 i 等 待 收 货 


PRBCES8 换 贷 流程 


重新 发 贷 
至 客户 
联系 客服 】 、 锯 训 南国。 库 内 
客服 确认 我 司库 周 ”退换 货 
财务 
安排 退 款 


1、 收 件 时 请 您 与 快递 人 员 当 面 核对 商品 ( 包括 赠品 ) 的 数量 ， 商 品 是 否 损坏 ， 如 商品 数量 准 
确 上 且 无 损坏 则 可 签收 货品 ， 如 发 现 数量 不 符 或 商品 损坏 可 当场 拒 收 并 致电 我 公司 与 客服 人 员 
联系 ， 公 司 根据 实际 情况 处 理 。 

2、 如 发 现 商品 尺码 、 颜 色 不 对 可 先行 签收 ， 然 后 致电 我 公司 与 客服 人 员 联 系 ， 公 司 可 按照 相 
关 售 后 服务 标准 进行 调整 货 处 理 。 


过 材 随 书 资源 \ 素 材 \13\18.jpg 


随 书 资源 \ 源 文件 \13\ 复 古 质 感 的 售后 


源 文件 服务 流程 描述 .psd 


设计 分 析 


“ 设计 要 点 01: 由 于 版 面 中 文字 较 多 ， 所 以 在 设计 的 时 候 为 了 方便 顾客 阅读 ， 使 用 图 标 对 文字 内 容 进行 指示 ， 以 归纳 总 结 的 


方式 提示 顾客 阅读 整个 服务 流程 。 


设计 要 点 02: 画面 中 通过 文字 与 图 形 的 结合 ， 以 箭头 作为 联系 元 素 ， 突 出 整个 流程 中 各 环节 的 先后 顺序 ， 让 画面 看 起 来 更 
具有 视觉 导向 性 。 


在 本 实例 中 ， 采 用 了 单 向 垂直 排列 的 页 面 布局 方式 来 安排 内 容 ， 既 符合 人 们 的 阅读 习惯 ， 又 增加 画面 的 称 定 感 。 同 时 ， 在 细 
节 划 分 上 又 适当 应 用 水 平 排列 的 布局 方式 进行 变换 ， 让 版 面 显 得 更 有 条 理性 。 


配色 方案 


本 实例 将 深蓝 色 和 深 红色 相 搭配 ， 利 用 色相 之 间 的 强烈 反差 ， 突 出 设计 图 中 的 重点 信息 ， 让 顾客 能 够 在 第 一 时 间 抓 住 画面 中 
的 天 键 信息 。 


技术 要 扣 


- 使 用 “移动 工具 把 底 纹 素材 拖 慢 至 新 建 的 文件 中 ， 通 过 更 改 混合 模式 加 深 纹理 效果 。 


“使 用 “椭圆 工具 和 圆 角 和 珑 形 工具 绘制 规则 的 几何 图 形 ， 在 绘制 的 图 形 中 添加 自 定义 形状 ， 结 合 图 层 样式 为 图 形 设置 
浮雕 效果 ， 增 强 立 体感 。 


结合 “ 横 排 文字 工具 和 “字符 ”面板 在 画面 中 输入 对 应 的 详细 信息 。 
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在 网 店 页 面 中 ， 除 了 店 招 、 导 航 、 欢 迎 模块 和 商品 细节 摘 述 外 ， 还 包含 天 于 店铺 优惠 信息 的 优惠 券 和 收藏 内 容 的 收藏 区 ， 马 
们 的 设计 较为 丰富 ， 大 小 也 不 固定 ,会 根据 页 面 整体 设计 而 友 生 相应 的 变化 。 设 计 优 惠 券 和 收藏 区 时 ， 有 了 时 还 可 以 根据 网 店 准 修 
风格 将 它们 与 促销 广告 、 导 航 栏 等 其 他 模块 组 合 起 来 ， 让 顾客 在 浏 史 页 面 时 ， 更 方便 地 领取 店铺 中 提供 的 优惠 券 或 者 将 喜欢 的 商 


品 或 店铺 添加 全 个 人 收藏 夹 。 


114 ”优惠 卷 与 促销 广告 的 完美 结合 
115 文艺 复古 风格 的 优惠 券 设计 
116 统一 风格 的 优惠 券 设 计 
117 ”卡通 风格 的 优惠 券 设计 
118 手绘 风格 的 收藏 区 设计 
119 “插画 风格 的 收藏 区 设计 
120 古典 风格 的 收藏 区 设计 


121 手机 端 收 藏 区 应 用 设计 


实例 114 ”优惠 卷 与 促 硝 广告 的 完美 结合 


在 设计 优惠 券 的 时 候 ， 有 时 也 会 将 其 与 欢迎 模块 、 促 销 广 告 结合 起 来 设计 ， 让 顾客 对 商品 产生 兴趣 的 同时 ， 及 时 领取 优惠 券 


购买 商品 。 本 实例 将 通过 具体 的 操作 步骤 讲述 如 何在 促销 广告 中 引入 优惠 券 的 设计 。 
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素 材 随 书 资源 \ 素 材 \14\01、02.jpg，03.psd 
源 文 件 随 书 资源 \ 源 文件 \14\ 优 惠 券 与 促销 广告 的 完美 结合 .psd 


步骤 01 创建 图 层 组 绘制 背景 图 案 


启动 Photoshop 程 序 ， 新 建 一 个 文档 ， 由 于 设计 中 会 包含 较 多 的 图 层 ， 为 了 万 便 管理 和 编辑 图 层 ,创建 “广告 ”图 层 组 ， 
然后 在 组 中 新 建 “ 文 案 ” “人 论 沁 ”和 “背景 ”图 层 组 。 选 中 “背景 ”图 层 组 ， 新 建 “ 图 层 1” 图 层 ， 把 前 景色 设置 为 R255、 
G191、B192， 按 下 快捷 键 Alt+ Delete， 将 背景 填充 为 粉红 色 ， 定 义 图 像 的 风格 。 


步骤 02 用 “画笔 工具 ”编辑 图 层 蒙 版 


填充 颜色 后 发 现 画面 颜色 显得 很 单一 ， 没 有 层次 感 。 所 以 为 此 图 层 添 加 图 层 蒙 版 ， 选 择 “画笔 工具 ”， 设 置 前 景色 为 黑色 ， 
在 画面 中 间 位 置 涂抹 ,得 到 渐变 的 背景 效果 。 


步骤 03 ”复制 并 添加 鞋子 图 像 


既然 是 促销 广告 ， 那 么 主要 商品 必须 是 要 有 的 。 打 开 素 材 文 件 01.jpg， 选 择 “移动 工具 ”， 把 图 像 拖 和 擅 至 新 建文 件 的 中 间 位 
置 ， 再 按 下 快捷 键 Ctrl+T， 调 整 图 像 大 小 ， 然 后 添加 图 层 蒙 版 ， 把 多 余 的 背景 隐藏 。 


步骤 04 设置 “表面 模糊 ” 渡 镜 模糊 图 像 


按 下 快捷 键 Ctrlt+， 放 大 图 像 ， 可 以 看 到 模特 皮肤 上 纤细 的 汗毛 ， 使 得 皮肤 看 起 来 不 够 光洁 。 按 下 快捷 键 Ctrl+J， 复 制图 
层 ， 创 建 “ 图 层 2 拷 贝 ”图 层 ， 执 行 “ 滤 镜 > 模 糊 > 表面 模糊 ”菜单 售 令 ， 设 置 滤 镜 ， 模 糊 图 像 。 


步骤 05 ”编辑 蒙 版 还 原 清晰 的 主体 对 象 
由 于 磨 皮 是 针对 皮肤 的 ， 而 上 一 步 操 作对 鞋子 也 进行 了 模糊 ， 因 此 选择 “画笔 工具 ”， 设 置 前 景色 为 黑色 ， 在 高 跟 鞋 位 置 涂 


抹 ， 还 原 清 晰 的 畦 子 效果 。 


步骤 06 设置 “曲线 ”调整 肤色 

经 过 磨 皮 ， 虽 然 模特 的 皮肤 变 得 光滑 、 细 肢 了 ， 但 是 皮肤 头 色 还 是 偏 黄 ， 不 够 日 督 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 2 找 
”图 层 蒙 版 ， 载 入 选区 。 创 建 “ 曲 线 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 单 击 并 向 上 拖 蝶 曲线 ， 提 亮 肤 色 ， 表 选 
“ 蓝 ”选项 ， 单 击 并 同上 拖 蝶 曲线 ， 使 皮肤 颜色 更 加 日 督 。 
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步骤 07 ”设置 “色彩 平衡 ”修饰 鞋子 颜色 


调整 了 皮肤 颜色 ， 接 下 来 是 鞋子 颜色 的 调整 。 创建 “色彩 平衡 1 ”调整 图 层 ， 打 开 “ 属 性 ”面板 ， 在 面板 中 设置 颜色 选项 ， 
加 深 红色 和 黄色 。 设 置 后 用 黑色 画笔 在 鞋子 外 的 区 域 涂抹 ， 还 原 其 颜色 。 


54 [色彩 平衡 
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步骤 08 用 “色相 /饱和 度 ” 更 改 颜色 


a 照片 中 的 鞋子 颜色 与 背景 色 过 于 相似 ， 使 得 主体 不 够 突出 。 按 住 Ctrl 键 不 放 ， 单 击 “ 色 彩 平衡 1” 调 整 图 层 蒙 版 ， 载 入 选 
区 。 新 建 “ 色 相 / 饱 和 度 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 拖 擅 “色相 ”和 “饱和 度 ” 滑 块 ， 将 鞋子 颜色 设置 为 优雅 的 蓝 


© 2 色相 /饱和 .… 
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步骤 09 复制 图 像 并 调整 女 鞋 大 小 


打开 素材 文件 02.jpg， 把 图 像 复制 到 新 建 的 文件 中 ， 得 到 “图 层 3” 图 层 。 由 于 原 素材 图 像 尺 十 太 大 ， 按 下 快捷 键 Ctrl+T， 
打开 目 由 变换 编辑 框 ， 对 图 像 进行 缩小 ， 以 适合 版 面 效 果 。 


LE 下 图 层 3 
4 -~ 色相/ 饱和. 


步骤 10 ”创建 图 层 蒙 版 隐藏 多 余 背景 


确保 “图 层 3” 图 层 为 选中 状态 ， 单 击 “ 图 层 ”面板 中 的 “添加 图 层 蒙 版 ”按钮 回 ， 为 “图 层 3” 图 层 添加 图 层 蒙 版 。 选 
择 “ 画 笔 工 具 ”， 把 前 景色 设置 为 黑色 ， 在 遍 跟 鞋 旁边 的 育 景 处 涂抹 ， 将 多 余 的 育 景 隐藏 。 


步骤 11 载 入 选区 并 复制 选区 内 的 图 像 


为 了 回顾 客 展示 不 同 颤 色 的 鞋子 效果 ， 给 顾客 更 多 的 选择 ， 可 以 添加 更 多 不 同 颤 色 的 高 跟 畦 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 
3” 戎 版 缩 史 图， 载 入 选区 。 按 下 快捷 键 Ctrl+J， 复 制 选 区 内 的 图 像 ， 得 到 “图 层 4” 图 层 ， 把 复制 的 图 层 中 的 鞋子 向 左 移 人 至 另 一 


步骤 12 ”使 用 “色相 /饱和 度 ” 调 整 畦 子 颜 色 


按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 4” 图 层 缩 史 图， 载 入 新 的 鞋子 选区 。 新 建 “ 色 相 / 饱 和 度 2” 调 整 图 层 ， 打开“ 属性 ”面板 ， 
在 面板 中 选择 “青色 ”， 把 “色相 ” 滑 块 向 右 拖 蝶 至 红色 位 置 ， 把 鞋子 颜色 更 改 为 红色 ， 表 向 右 拖 咏 “饱和 度 ” 滑 块 ， 提 高 颜色 
饱和 度 。 


步骤 13 ”使 用 “ 套 达 工具 ” 抠 取 素材 


经 过 前 面 的 操作 ， 完 成 了 主 商品 高 跟 鞋 的 处 理 ， 接 下 来 是 沪 饰 元 素 的 添加 。 单 击 “ 论 激 ” 图 层 组 ， 打 开 素 材 文 件 03.psd， 
选择 “ 套 论 工具 ”， 人 在 伦 注 图 像 中 单 击 并 拖 蝶 鼠标 ， 选 中 其 中 一 个 花 河 图 像 ， 然 后 选择 “移动 工具 ”， 把 选区 内 的 花 兴 拖 至 畦 子 


边 。 


中 


步骤 14 复制 花 痢 图 像 


由 于 此 画面 中 不 止 需要 一 片花 沁 ， 为 了 得 到 更 多 飘散 的 花 痕 效果 ， 连 续 按 下 快捷 键 Ctrl+J， 复 制 更 多 的 花 泊 图 像 ， 然 后 将 其 
拖 忠 至 不 同 的 位 置 ， 根 据 画 面 需 要 再 适当 调整 花 兴 的 大 小 。 


图 屋 5 拷 由 4 
图 层 5 拷 风 3 


图 层 5 拷贝 2 
图 层 5 拷贝 
图 层 5 


步骤 15 ”添加 更 多 化 准 妆 饰 


打开 论 泊 素材 图 像 ， 继 续 使 用 同样 的 方法 ， 将 更 多 的 花 少 图 像 拖 蝶 至 鞋子 图 像 上 。 选 中 其 中 一 片花 兴 图 像 ， 创 建 “ 色 相 / 饮 
和 度 3” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 设置 参数 ， 调 整 花 闪 的 颜色 ， 统 一 图 像 颜 色 。 


步骤 16 在 图 像 右 侧 输入 促销 信息 


选择 所 有 伦 泊 图 层 ， 按 下 快捷 键 Ctrl+Alt+E， 基 印 选中 图 层 ， 然 后 将 苹 印 得 到 的 花 兴 图 像 移 公 鞋子 的 右 侧 ， 最 后 单 击 “ 文 
案 ” 图 层 组 ， 在 画面 中 输入 广告 促销 文字 。 
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步骤 17 ”用 “和 窍 形 工具 ”绘制 算 形 


制作 好 广告 图 像 后 ， 接 下 来 是 优惠 券 的 制作 。 新 建 “ 优 惠 券 1” 图 层 组 ， 设 置 前 景色 为 R243、G88、B98， 选 择 “ 和 窟 形 工 


具 ”， 在 广告 图 像 下 方 单 击 并 拖 蝶 鼠标 ， 绘 制 一 个 红色 的 算 形 。 


步骤 18 绘制 颜色 深 一 些 的 和 矩形 


将 前 景色 更 改 为 RR203、G30、B60， 在 已 绘制 的 矩形 芳 边 再 绘制 一 个 着 色 较 深 的 算 形 ， 组 成 优惠 卷 基 本 形态 。 


步骤 19 使用“ 目 定形 状 工具 ”绘制 图 形 


为 了 让 绘制 的 优惠 卷 更 漂 有 党 ,选择 “ 目 定 形状 工具 ”， 单 击 “ 形 状 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 “形状 ” 拾 色 器 中 单 击 “ 邮 
票 ” 形 状 ， 在 算 形 上 万 单 击 并 拖 忠 女 标 ， 绘 制 邮票 图 形 。 
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步骤 20 ”复制 图 形 并 排 图 形 效果 


连续 按 下 两 次 快捷 键 Ctrl+J， 复 制 两 个 邮票 图 形 ， 调 整 其 位 置 ， 得 到 并 排 的 图 形 效果 ， 然 后 将 邮票 图 形 合并 ， 得 到 “形状 
1” 图 层 。 


步骤 21 复制 图 形 调整 位 置 


按 下 快捷 键 Ctrl+J， 复 制 “ 形 状 1” 图 层 ， 得 到 “形状 1 拷贝 ”图 层 。 选 择 “ 移 动工 具 ”， 把 复制 的 图 形 向 下 拖 忠 到 红色 和 矩形 
下 方 ， 得 到 对 称 的 图 形 效果 。 


步骤 22 创建 蒙 版 制作 锯齿 状 边 绿 


隐藏 “形状 1” 和 “形状 1 拷贝 ”图 层 ， 为 “矩形 1” 添 加 图 层 蒙 版 ， 按 住 Ctrl 键 不 放 ， 单 击 “ 形 状 1” 图 层 缩 虎 图 ， 载 入 选 
区 ， 单 击 “ 窍 形 1” 图 层 蒙 版 ， 按 下 快捷 键 Alt+ Delete， 将 选区 填充 为 黑色 。 再 按 住 Ctrl 键 不 放 ， 单 击 “ 形 状 1” 图 层 缩 贞 图 ， 载 
入 选区 ， 单 击 “ 算 形 1” 图 层 家 版 ， 按 下 快捷 键 Alt+ Delete， 将 选区 填 宛 为 黑色 ， 得 到 饥 齿 状 的 边 绿 效果 。 使 用 同样 的 方法 ， 
为 “矩形 2” 图 层 设置 相同 的 蒙 版 效果 。 


步骤 23 ”设置 并 输入 文字 


经 过 前 面 的 操作 ， 完 成 了 优惠 券 外 形 的 绘制 ， 下 面 就 是 优惠 券 文 字 信息 的 输入 。 选 用 “ 横 排 文字 工具 ”在 优惠 券 中 间 输 入 数 
字 5， 为 了 突出 优惠 券 面值 ， 把 字体 设置 为 较 粗 的 万 正 综艺 人 简体， 颜色 设置 为 黄色 。 继 续 使 用 同样 的 方法 ， 进 行 更 多 文字 和 优惠 
券 的 设计 ， 完 成 本 实例 的 制作 。 
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实例 115 文艺 复古 风格 的 优惠 券 设 计 


本 实例 是 为 某 品 牌 服装 店 设计 的 优惠 券 ， 在 设计 过 程 中 将 优惠 券 与 促销 广告 结合 在 一 起 ， 表 现 优惠 券 适 用 的 范围 为 秋季 上 新 
商品 。 同 时 ， 针 对 不 同 顾客 的 购买 力 ， 设 置 了 多 种 不 同 面额 的 优惠 券 ， 为 顾客 提供 了 更 多 的 选择 。 
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源 文 件 随 书 资源 \ 源 文件 \14\ 文 艺 复古 风格 的 优惠 券 设计 .psd 


步骤 01 复制 图 像 创建 选区 


启动 Photoshop 程 序 ， 新 建 一 个 文档 ， 新 建 “ 背 景 图 ”图 层 组 ， 打 开 素 材 文件 04.jjpg， 把 图 像 拖 钨 至 “背景 图 ”图 层 组 
中 。 由 于 图 像 下 方 需要 添加 优惠 券 ， 所 以 用 “起 形 选 框 工具 ”选择 图 像 上 半 部 分 ， 单 击 “ 添 加 图 层 蒙 版 ”按钮 ， 添 加 蒙 版 ， 把 选 
区 外 的 图 像 隐藏 。 


步骤 02 用 “曲线 ” 提 亮 图 像 


由 于 本 实例 需要 制作 文艺 复古 风格 的 图 像 ， 而 原 图 像 明显 太 暗 了 ， 与 要 表现 的 风格 不 太 吻 合 ， 所 以 需要 对 色调 进行 调整 。 按 
住 Ctrl 键 不 放 ， 单 击 “ 图 层 1” 图 层 蒙 版 ， 载 入 选区 ， 新 建 “ 曲 线 1” 调 整 图 层 ， 先 提 亮 图 像 。 


设置 “颜色 填 元 ”图 层 填充 颜色 


设置 后 友 现 图 像 还 是 很 瞳 ， 创 建 “ 颜 色 填 充 1” 调 整 图 层 ， 将 填充 颜色 设置 为 R249、G242、B226,， 设置 后 将 图 层 混 合 模式 
设置 为 “ 私 加 ”，“ 不 透明 度 ” 设 置 为 69%， 寺 加 高 亮 的 颜色 ， 使 图 像 变 得 更 亮 。 
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步骤 04 用 “画笔 工具 ”修饰 细节 


经 过 上 一 步 操作 ， 虽 然 提 亮 了 图 像 ， 但 是 模特 面部 有 点 曝光 过 度 了 。 因 此 单 击 “ 颜 色 填充 1 ”调整 图 层 蒙 版 ， 选 用 黑色 男 
在 模特 面部 皮肤 位 置 涂抹 ,还原 该 区 域 的 图 像 赏 度 。 
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步骤 05 复制 图 层 更 改 蒙 版 


为 了 让 图 像 的 高 光 部 分 变 得 更 亮 ， 按 下 快捷 键 Ctrl+J， 复 制图 层 ， 得 到 “颜色 填充 1 拷贝 ”图 层 ， 再 选择 “画笔 工具 ”， 设 
置 前 景色 为 黑色 ， 在 画面 下 半 部 分 涂抹 ， 还 原 隐藏 部 分 的 图 像 影 调 。 


不 各 明度 : 90% 


“= 100% 


? 国 隐 ”新 色 填 充 1 


新 建 “ 色 阶 1” 调 整 图 层 ,， 打开 “属性 ”面板 ， 在 面板 中 将 灰色 滑 块 向 左 拖 忠 ， 降 低 图 像 中 间 调 部 分 的 亮度 。 此 时 在 图 像 窗 
口中 可 看 到 调整 后 的 图 像 变 得 更 加 唯美 。 


反 巧 提示 : “ 色 阶 ”选项 肯 块 的 设置 


色 阶 选项 下 包括 3 个 选项 滑 块 ， 拖 慢 黑 色 滑 块 ， 可 以 调整 图 像 中 阴影 部 分 的 亮度 ; 拖 提 灰色 滑 块 ， 可 以 调整 图 像 中 中 间 
调 部 分 的 亮度 ; 抑 粤 白色 滑 块 ， 可 以 调整 图 像 中 高 光 部 分 的 亮度 。 


步骤 07” 经 制 正 圆 图 形 


处 理 好 背景 图 像 后 ， 为 了 突出 服饰 品牌 文化 ， 将 前 景色 设置 为 R213、G197、B171， 选 择 “椭圆 工具 ”， 按 住 Shift 键 不 
放 ， 在 图 像 中 间 单 击 并 拖 遇 鼠 标 ， 绘 制 正 贺 图形， 绘制 后 将 图 层 的 “不 透明 度 ” 调 整 为 559。 


步骤 08 ”添加 枫叶 图 像 并 输入 文字 


选择 “ 横 排 文字 工具 ”， 人 在 画面 中 单 击 并 输入 相应 的 文字 。 输 入 后 打开 素材 文件 05.psd， 将 其 拖 蝶 至 椭圆 图 形 下 万 。 按 住 
Ctrl 键 不 放 。 单 击 “ 椭 加 1” 图 层 缩 多 图 ， 载 入 选区 ， 蛙 击 “ 添 加 图 层 蒙 版 ”按钮 ， 添 加 蒙 版 ， 把 椭圆 内 部 的 枫叶 图 像 隐藏 。 


步骤 09 用 “ 窍 形 工 具 ” 绘 制图 形 


完成 育 景 的 设置 后 ， 接 下 来 进行 优惠 券 的 绘制 。 为 了 方便 设置 和 管理 优惠 券 信 息 ， 新 建 “优惠 券 1” 图 层 组 ， 移 设置 前 景色 
为 R253、QG250、B180， 用 “ 窍 形 工具 ”绘制 一 个 黄色 起 形 ， 再 将 前 景色 设置 为 R254、G113、B141， 用 “ 目 形 工具 ”绘制 一 
个 粉红 色 和 矩形 。 


步骤 10 ”使 用 “ 目 定 形状 工具 ”绘制 图 形 


由 于 大 多 数 优惠 券 的 边 绿 都 是 饥 齿 状 的 ， 因 此 选择 “ 目 定 形状 工具 ”， 单 击 选 项 栏 中 “形状 ” 石 侧 的 下 拉 按 钮 ， 在 展开 
的 “形状 ” 拾 色 器 中 单 击 “ 邮 票 ”形状 ， 设 置 前 景色 为 R254、G113、B141， 绘 制 红色 的 邮票 图 形 ， 使 其 与 下 方 的 矩形 组 合 。 


步骤 11 用 “钢笔 工具 ”绘制 三 角形 效果 


为 了 使 绘制 的 优惠 券 表现 出 立体 的 视 况 效果， 还 需要 为 其 添加 投影 。 选 择 “钢笔 工具 前 景色 为 灰色 ， 绘 制 模式 


为 “形状 ”， 在 优惠 券 左 下 角 连 续 单 击 ， 绘 制 三 角形 效果 。 
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步骤 12 ”设置 “局 斯 模糊 ” 滤 镜 模糊 图 像 


绘制 后 ， 投 影 看 起 来 太 假 ， 为 了 让 投影 更 加 下 真 ， 需 要 进行 模糊 处 理 。 在 模糊 图 像 前 ， 先 将 形状 栅 格 化 ,创建 “图 层 3” 
层 。 执 行 “ 渡 镜 > 模糊 > 高 斯 模糊 ”菜单 命令 ， 打开“ 高 斯 模糊 ”对 话 框 ， 在 对 话 框 中 设置 “半径” 选项， 模糊 图 像 。 
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步骤 13 ”复制 图 形 并 调整 投影 位 置 


在 优惠 券 一 侧 添 加 投影 后 ， 另 一 侧 也 需要 添加 相同 的 投影 效果 。 按 下 快捷 键 Ctrl+J， 复 制图 层 ， 得 到 “图 层 3 拷贝 ”图 层 。 
执行 “编辑 > 变换 路 径 > 水 平 翻转 ”菜单 命令 ， 水 平 翻转 图 像 ， 骨 适当 调整 其 位 置 ， 得 到 对 称 的 投影 效果 。 


步骤 14 ”在 矩形 上 输入 优惠 券 信息 


经 过 前面 的 操作 ， 完 成 了 优惠 券 的 绘制 。 为 了 让 顾客 了 解 优惠 券 的 面值 和 使 用 要 求 ， 选 择 “ 横 排 文 字 工具 ”， 在 优惠 券 上 输 
入 相应 的 优惠 信息 ， 为 了 表现 文字 层次 天 系 ， 输 入 后 可 结合 “字符 ”面板 对 文字 的 颜色 、 大 小 进行 调整 。 


步骤 15 ”复制 图 层 组 更 改 优惠 券 信息 


由 于 一 个 店铺 中 的 优惠 券 面额 往往 不 止 一 种 ， 所 以 将 “优惠 券 1” 图 层 组 复制 ， 把 复制 的 优惠 券 向 右 移 至 不 同 的 位 置 ， 然 后 
选择 “ 横 排 文字 工具 ”， 单 击 优惠 券 中 的 文字 ， 对 优惠 券 的 面额 和 使 用 要 求 进行 更 改 。 人 至此， 已 完成 此 实例 的 制作 。 
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实例 116 “统一 风格 的 优惠 券 设 计 


本 实例 是 为 某 天 猫 店铺 设置 的 优惠 券 ， 通 过 选用 靓丽 的 蓝 色 、 黄 色 、 红 色 等 不 同 的 颜色 块 突出 优惠 信息 ， 让 顾客 一 眼 就 注意 
到 店铺 的 优惠 信息 ， 吸 引 顾客 的 眼球 。 此 外 ， 利 用 字体 的 大 小 营造 出 一 定 的 层次 感 和 主 次 感 ， 使 画面 中 的 重点 信息 更 加 突出 。 


源 文 件 随 书 资源 \ 源 文件 \14\ 统 一 风格 的 优惠 券 设计 .psd 


设计 分 析 
-设计 要 点 01: 画面 采用 了 不 同 闫 色 的 色 块 来 区 分 各 种 不 同 的 区 域 ， 鲜 艳 的 色彩 搭配 给 人 带 来 愉悦 的 心情 。 


:设计 要 点 02: 画面 中 使 用 粗 体 文字 将 店铺 优惠 券 不 同 的 面额 呈现 出 来 ， 为 顾客 提供 了 更 多 的 选择 ， 方 便 顾 客 在 购买 商品 时 
领取 更 合适 的 店铺 优惠 券 。 


设计 要 点 03: 上 、 下 分 隔 的 版 式 布局 让 页 面 中 各 部 分 的 功能 划分 更 加 明确 。 
版 式 分 析 


本 实例 将 画面 分 为 上 、 下 两 个 区 域 ， 上 半 部 分 为 优惠 券 领 取 的 步骤 与 方法 ， 下 半 部 分 则 为 不 同 面额 的 优惠 券 ， 这 种 安排 方式 
让 功能 分 布 更 加 清晰 ， 易 于 被 顾客 接受 ， 给 人 整齐 有 序 的 感 总 。 


配色 方案 


不 同 的 颜色 可 以 市 给 人 不 同 的 视 党 感受 ， 由 于 本 实例 中 的 优惠 券 有 不 同 的 面额 和 适用 范围 ， 所 以 在 设计 使 中 用 监 色 、 红 色 和 
绿色 3 种 不 同 的 颜色 进行 表现 ， 使 得 简单 的 优惠 券 领取 也 变 得 多 姿 多 彩 ， 从 而 激 友 顾客 的 购买 热情 。 


技术 要 扣 


. 使 用 “ 拢 形 工 具 ” 在 画面 中 绘制 同等 大 小 的 天 形 ， 并 根据 版 面 需要 对 撼 形 的 颜色 进行 调整 ， 再 用 “ 自 定形 状 工 具 ” 对 拢 形 
的 边缘 进行 修饰 ， 得 到 锯齿 状 的 边缘 效果 。 


` 使 用 “ 圆 角 和 矩形 工具 ”在 优惠 券 下 方 绘制 图 形 ， 对 绘制 的 图 形 进行 模糊 处 理 ， 设 置 为 投影 效果 。 


. 使 用 “ 横 排 文字 工具 ”为 画面 添加 所 需 的 文字 信息 ， 并 通过 “字符 ”面板 设置 文字 属性 。 


实例 117 卡通 风格 的 估 囊 芬 设 计 


本 实例 是 为 某 店 铺设 计 的 优惠 券 ， 制 作 时 通过 使 用 可 爱 的 卡通 形象 来 拉 近 顾客 与 店铺 之 间 的 距离 ， 增 加 画面 的 杀 切 感 ， 而 整 
个 画面 及 用 统一 的 色调 ， 让 顾客 的 视 党 体验 更 加 良好 ， 更 容易 得 到 其 认可 。 下 面 分 析 此 实例 的 设计 要 点 、 版 面 布 局 等 
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素 材 随 书 资源 \ 素 材 \14\06.jpg、07.psd 
源 文 件 随 书 资源 \ 源 文件 \14\ 卡 通风 格 的 优惠 券 设计 .psd 


设计 分 析 
“ 设计 要 点 01: 将 优惠 券 信息 添加 到 和 画面 中 ， 激 发 顾客 的 购买 欲望 


` 设计 要 点 02: 通过 添加 卡通 形象 加 以 修饰 ， 让 简单 的 画面 更 富有 乐趣 ， 而 背景 中 浅 浅 的 底 纹 为 画面 增添 了 动感 。 


. 设计 要 点 03: 在 文字 信息 的 处 理 上 ， 使 用 变化 而 协调 的 字体 组 合 让 枯燥 的 文字 更 有 视觉 跳跃 感 ， 同 时 也 让 画面 中 要 表现 的 
信息 的 主 次 更 加 分 明 。 


版 式 分 析 


本 实例 在 版 面 的 处 理 上 采用 了 较 紧 凑 的 布局 安排 内 容 ， 图 像 分 为 堪 、 右 两 个 部 分 ， 左 侧 为 优惠 券 ， 石 侧 则 为 收藏 区 ， 两 个 部 
分 进行 了 合理 分 隔 ， 让 人 感觉 在 统一 中 产生 了 细微 的 变化 ， 整 个 布局 显得 自然 、 灵 活 。 


配色 方案 
标 色 弟 单 让 人 联想 到 目 然 、 泥 土 等 ， 它 给 人 以 质朴 、 可 靠 的 感觉 。 在 本 实例 中 ， 为 了 获得 顾客 更 多 的 信任 感 ， 整 个 画面 以 浅 


标 色 为 主 色调 ， 并 与 颜色 相近 的 卡通 形象 相 搭 配 ， 营 造 出 温暖 的 怀旧 情 司 ， 让 顾客 感 碗 更 加 亲切 。 
技术 要 点 


` 使 用 “移动 工具 把 底 纹 和 卡通 图 像 拖 慢 至 新 建 的 文件 中 ， 为 图 像 添 加 装饰 元 素 。 


. 应 用 “ 横 排 文字 工具 ”在 画面 中 输入 优惠 券 信息 ， 为 表现 立体 的 文字 效果 ， 使 用 “图 层 样式 ”为 文字 添加 描 边 和 颜色 登 加 
等 效果 。 


` 使 用 “ 竹 形 工具 在 输入 的 文字 下 方 绘制 矩形 ， 突 出 优惠 券 信息 。 


实例 118 手绘 风格 的 收藏 区 设计 


本 实例 是 为 家 居 用 品 店 设计 的 收藏 区 ， 在 设计 过 程 中 将 提 报 的 家 居 用 品 照 片 转换 为 手绘 风格 ， 通 过 调整 颜色 使 其 与 店铺 兴修 
风格 统一 起 来 。 为 方便 顾客 了 解 更 多 商品 ， 还 在 图 像 左 下 角 使 用 不 同 的 家 居 照 片 来 展示 ， 突 出 了 店铺 中 商品 的 多 样 性 。 
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素 材 随 书 资源 \ 素 材 \14\08、09.jpg，10.psd 
源 文件 。 随 书 资源 源 文件 \1 人 手绘 风格 的 收藏 区 设计 .psd 


步骤 01 在 新 建 的 文件 中 为 背景 填充 颜色 


启动 Photoshop 程 序 ， 新 建 一 个 文档 ， 将 前 景色 设置 为 R241、G232、B227， 按 下 快捷 键 Alt+ Delete， 运 用 设置 的 前 景色 
填充 背景 ， 定 义 收藏 区 的 整体 风格 。 


步骤 02 复制 家 居 素 材 至 背景 中 


打开 素材 文件 08.jpg， 选 择 “ 移 动工 具 ”， 把 图 像 拖 忠 至 新 建文 档 的 左 侧 。 由 于 原 素材 照片 尺 二 太 大 ， 按 下 快捷 键 Ctrl+T， 
对 图 像 进行 缩小 设置 以 符合 画面 需要 。 


步骤 03 ”设置 滤 镜 模糊 图 像 


执行 “ 滤 镜 > 模糊 > 高 斯 模糊 ”有 菜单 命令 ， 在 打开 的 对 话 框 中 设置 选项 ， 模 糊 图 像 ， 再 执行 “ 滤 镜 > 模糊 > 特殊 模糊 ”菜单 命 
令 ， 在 打开 的 对 话 框 中 设置 选项 ， 进 一 步 模糊 图 像 。 
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步骤 04 ”执行 “去 色 ” 命 令 去 挥 颜 色 


按 下 快捷 键 Ctrl+J， 复 制 家 居 图 像 ， 得 到 “图 层 1 拷 贝 ”图 层 。 执 行 “ 图 像 > 调整 > 去 色 ” 有 菜单 命令 ， 去 除 图 像 颜 色 ， 表 按 下 
快捷 键 Ctrl+J， 复 制图 层 ， 得 到 “图 层 1 拷贝 2” 图 层 。 


了 和， 图 层 1 拷贝 2 
二 2 和 图 后 1 持 风 
Eu 和 技 1 


步骤 0? 反 相 图 像 应 用 “最 小 值 ” 渡 镜 


执行 “图 像 > 调整 > 反 相 ” 菜 单 命令 ， 反 相 图 像 。 为 了 突出 暗部 区 域 的 轮廓 ， 执 行 “ 滤 镜 > 其 他 > 最 小 值 ” 菜 单 命令 ， 打 
开 “ 最 小 值 ” 对 话 框 ， 在 对 话 框 中 设置 参数 ， 单 击 “ 确 定 ” 按 钮 。 


步骤 06 更改 图 层 混合 模式 


返回 图 像 窗 口 ， 选 择 “图 层 1 拷贝 2” 图 层 ， 将 此 图 层 的 混合 模式 设置 为 “颜色 减 淡 ”， 此 时 可 以 看 到 将 照片 转换 为 手绘 续 
稿 效果 。 选 择 “ 图 层 1” “图 层 1 拷贝 ”和 “图 层 1 拷贝 2”” 图 层 ， 按 下 快捷 键 Ctrl+Alt+E， 竺 印 选中 图 层 ， 得 到 “图 层 1” 图 层 ， 
降低 “不 透明 度 ” 人 至 70%。 
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* 不 本 明度 : 100% 
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步骤 07 ”用 “渐变 工具 ”设置 渐 隐 的 画面 效果 


选择 “ 算 形 工具 ”， 在 “图 层 1” 图 层 下 方 绘制 一 个 矩形 ， 然 后 单 击 “ 图 层 1” 图 层 , 添 加 图 层 蒙 版 ， 选 择 “ 渐 变 工具 ”， 
在 选项 柱 中 设置 各 项 参数 后 ， 从 图 像 右 侧 向 左 拖 岛 新 变 ， 创 建 渐 隐约 果 ， 使 家 居 图 像 融 入 到 背景 中 。 


近 巧 提示 : 渐变 类 型 的 选择 


渐变 工具 ”选项 栏 中 提供 了 线性 渐变 径 向 渐变 “角度 渐变 对称 渐 变 和 蓉 形 渐变 5 种 不 同 的 渐变 类 型 ， 
只 需要 单 击 对 应 的 渐变 按钮 ， 就 可 以 选择 该 类 型 的 渐变 。 


步骤 08 ”调整 线 稿 颜色 


由 于 转换 后 的 手绘 图 像 为 黑 日 效果 ， 与 背景 颜色 不 协调 ， 所 以 还 需要 对 图 像 进行 着 色 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 1” 图 
层 蒙 版 ， 载 入 选区 。 新 建 “ 颜 色 填 序 1” 调 整 图 层 ， 设置 填充 色 为 R148、G106、B55， 设 置 后 将 图 层 混 合 模 式 调 整 为 “颜色 加 
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步骤 09 设置 “色彩 平衡 ”平衡 图 像 颜色 


经 过 上 一 步 操作 ， 家 居 图 像 由 黑 日 转换 为 彩色 效果 ， 但 是 其 颜色 与 背景 颜色 还 是 不 协调 ， 还 需要 平衡 其 色彩 。 创 建 “ 色 彩 平 
衡 1” 调 整 图 层 ， 打开“ 属性 ”面板 ， 在 面板 中 分 别 对 “阴影 


和 
必 加 色彩 平衡 


Ec 


书 周 : ”阴间 ? = ”人 色 月 : ”中 国明 


步骤 10 设置 “ 色 阶 ” 和 “可 选 颜色 ” 


创建 “ 色 阶 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 设置 选项 ， 调 整 图 像 的 亮度 。 新 建 “ 选 取 颜 色 1” 调 整 图 层 , 打开 “ 属 
性 ”面板 ， 在 面板 中 对 “红色 ”进行 调整 。 调 整 后 在 图 像 窗口 中 看 到 家 居 商 品 颜 色 与 画面 整体 的 色调 变 得 更 加 统一 了 。 


中 间 周 较 亮 


RGB 


步骤 11 ”添加 另外 的 素材 图 像 


为 了 使 画面 区 得 更 加 丰富 ， 可 以 再 添加 一 些 图 像 。 打 开 素 材 文 件 09.jpg， 新 建 “ 家 居 02” 图 层 组 ， 选 择 “移动 工具”， 把 图 
像 拒 入 “家 居 02” 图 层 组 中 ， 应 用 与 前 面相 同 的 方法 ， 对 图 像 进行 颜色 和 显示 区 域 的 调整 ， 把 图 像 拼合 到 一 起 。 


步骤 12 复制 家 居 商 品 图 像 至 文件 左下 和 角 


新 建 “ 家 居 03” 图 层 组 ， 把 素材 文件 08.jpg 复 制 到 此 图 层 组 中 ， 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 框 ， 对 图 像 进行 缩放 
操作 ， 使 图 像 变 得 更 小 。 


[二 | 图 层 3 
| 冯 矩形 2 


步骤 13 ”创建 蒙 版 隐藏 部 分 图 像 


选择 “和 矩形 工具 ”， 在 家 居 图 像 上 绘制 日 色 的 和 矩形 背景 ， 然 后 选择 “多 边 形 套 这 工具 ”， 人 在 家 居 图 像 中 连续 单 击 ,创建 选 
区 。 单 击 “ 图 层 ”面板 中 的 “添加 图 层 蒙 版 ”按钮 ， 添 加 蒙 版 ， 再 把 夹子 图 像 10.psd 复 制 到 画面 中 ， 制 作成 相 夹 效果 。 


步骤 14 设置 “投影 ”样式 为 相框 添加 投影 


为 了 让 添加 的 相 夹 图像 呈 现 立 体 的 视 名 效果， 选择 “矩形 2” 图 层 ， 执 行 “ 图 层 > 图 层 样 式 > 投 影 ”菜单 合 令 ， 打 开 “ 图 层 
样式 ”对 话 框 ， 在 对 话 框 中 设置 投影 的 各 项 参数 ， 设 置 后 单 击 “ 确 定 ” 按 钮 ， 完 成 投影 的 添加 。 
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混 全 槛 式 : | 正片 亚 底 : 国 国 
(0 一 | |]% 
负 工 人 【 ) [124 | 民品 使 用 全 局 光 () 
下 高 IC)， 写 | 名 
站 RRR) oe [|% 
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步骤 15 复制 更 多 的 相框 及 照片 


如 果 图 像 下 方 只 有 一 个 相 夹 图 像 ， 男 面 看 起 来 会 显得 单调 ， 所 以 把 相框 与 照片 羡 Hj， 分 别 移 公 其 左 、 右 两 出 ， 然 后 根据 需要 
适当 调整 其 大 小 。 


步骤 16 ”输入 文字 添加 妆 饰 图 形 


为 了 收藏 区 的 完整 度 ， 结 合 “ 横 排 文字 工具 ”和 “ 直 排 文字 工具 ”在 画面 左下 角 和 右 侧 的 留 日 区 域 添 加 文字 ， 并 应 用 图 形 绘 
制 工具 添加 简单 的 图 案 加 以 修饰 ， 完 成 本 实例 的 操作 。 
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ME TO MY SHOP rr 用 Psd 


反 巧 提示 : 图 层 蒙 版 的 添加 与 删除 


Photoshop 中 ， 要 为 图 层 添 加 图 层 蒙 版 ， 可 以 单 击 “ 图 层 ”面板 底部 的 “添加 图 层 蒙 版 按钮 加 ， 快速 添加 图 层 蒙 版 ， 也 可 
以 执行 “图 层 > 图 层 蒙 版 > 显示 全 部 ”人 命令， 创建 图 层 蒙 版 。 如 果 对 添加 的 蒙 版 不 满意 ， 可 以 单 击 蒙 版 缩 览 图 ， 将 其 拖 提 至 “其 
除 图 层 ” 按 甸 基 汪 删除 荣 版 。 


实例 119 ”插画 风格 的 收藏 区 设计 


本 实例 是 为 儿童 用 品 店 设 计 的 收藏 区 ， 画 面 中 用 卡通 图 像 作 为 背景 ， 使 画面 显得 更 轻松 、 活 泼 。 同 时 ， 在 文字 的 处 理 上 ， 为 
了 让 顾客 知道 收藏 店铺 可 以 得 到 哪些 好 处 ， 利 用 红包 、 优 惠 券 来 吸引 顾客 的 眼球 ， 提 高 店铺 收藏 与 点 击 率 
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索 材 隐 书 资源 哺 材 (14\11、 12.jpg，13.psd 
源 文 件 随 书 资源 \ 源 文件 \14\ 插 画 风格 的 收藏 区 设计 .psd 


启动 Photoshop 程 序 ， 新 建 一 个 文件 ， 先 创建 “背景 图 案 ” 图 层 组 ， 用 于 进行 背景 图 案 的 制作 。 打 开 素 材 文 件 11.jpg， 把 
图 像 复 制 到 “背景 图 案 ” 图 层 组 中 ， 根 据 版 面 布局 调整 图 像 的 大 小 和 位 置 ， 直 公 填 满 整个 画面 。 


步骤 02 ”复制 图 像 更 改 混合 模式 


由 于 素材 图 像 为 矢量 图 形 ， 感 党 辆 面 太平 了 『， 为 了 增强 其 质感 ， 打 开 纹 理 素材 12.jpg， 将 图 像 拖 忠 至 “图 层 1” 图 层 上 ,得 
到 “图 层 2” 图 层 ， 将 此 图 层 的 混合 模式 设置 为 “正片 到底 ”， “不 透明 度 ” 设 置 为 46%， 为 图 像 玛 加 纹理 效果 。 


一 
| 图 层 2 


步骤 03 设置 “ 色 阶 ”增强 对 比 


蔷 加 纹理 后 感觉 图 像 对 比 不 强 ， 有 扣 偏 灰 。 创 建 “ 色 阶 1” 调 整 图 层 , 打开 “属性 ”面板 ， 在 面板 中 选择 “增强 对 比 度 
1” 选 项 ， 快 速 提高 图 像 的 对 比 度 ， 使 画面 更 有 层次 感 。 


和 祯 及: 二 了 村 度 1 


步骤 04 调整 “色彩 平衡 ”修饰 颜色 
创建 “色彩 平衡 1 ”调整 图 层 ， 打 开 “ 属 性 ”面板 ， 在 面板 中 分 别 对 “阴影 ”和 “中 间 调 ”颜色 进行 调整 ， 加 深 红色 和 黄 


色 ， 增强 背景 图 像 的 复古 感 。 
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保留 明度 ” 保 铝 明度 


步骤 05 用 “ 窍 形 选 框 工具 ”选择 图 像 边 绿 


为 了 使 图 像 的 层次 更 加 突出 ， 可 以 对 其 添加 早 影 。 选 择 “和 窟 形 选 框 工具 ”， 在 选项 栏 中 设置 各 项 参数 ， 设 置 后 治 图 像 边 绿 单 
击 并 拖 忠 鼠标 ， 绘 制 选区 ， 由 于 这 里 要 选择 边缘 部 分 ， 再 按 下 快捷 键 Shift+Ctrl+1， 反 选 选区 ， 选 择 图 像 。 
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技 15 提 示 : 羽化 选区 


用 选区 工具 创建 选区 后 ， 执 行 “ 选 择 > 修 改 > 羽 化 ” 莱 单 命令 ,打开 “羽化 选区 ”对话 框 ， 在 对 话 框 中 可 设置 选项 并 羽化 选 
区 。 


步 又 06 设置 “曲线 ”调整 边 绿 亮度 


新 建 “ 曲 线 1” 调 整 图 层 ， 打 开 “ 属 性 ”面板 。 要 为 图 像 添加 早 影 ， 融 需要 将 边 绿 部 分 的 之 度 降低 ， 因 此 在 “属性 ”面板 中 
单 击 并 同 下 拖 护 曲线 。 


fe " = NN 二 7 
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步骤 07 用 “椭圆 工具 ”绘制 渐变 圆 形 


经 过 前 面 的 操作 ， 完 成 了 背景 图 像 的 设计 ， 接 下 来 是 收藏 信息 的 设置 。 在 输入 信息 前 ， 用 “ 李 圆 工具 ”在 背景 右 侧 绘制 一 个 
顶 圆 形 ， 用 “直接 选择 工具 ”选中 绘制 的 圆 形 ， 调 整 填 殉 颜色 ， 得 到 渐变 填 宛 的 椭圆 效果 。 


芒 i: 100 ~ 驳 YY 与 图 层 对 充 


步骤 08 ”设置 样式 增强 立体 感 


调整 椭圆 颜色 后 友 现 图 像 还 是 “ 浮 ” 于 背景 中 ， 也 没有 立体 感 。 执 行 “图 层 > 图 层 样 式 > 和 斜面 和 浮雕 ”菜单 命令 , 打开 “图 
层 样 式 ” 对 话 框 ， 先 在 “样式 ”下 拉 列 表 框 中 选择 “内 冬 面 ”， 然 后 调整 样式 选项 ， 表 将 高 光 “ 不 透明 度 ” 设 置 为 81%， 阴 
影 “ 不 透明 度 ” 设 置 为 50%， 单 击 “确定 ”按钮 ， 应 用 样式 。 


步骤 09 用 “ 横 排 文字 工具 ”输入 文字 


选择 “ 横 排 文字 工具 ”， 在 椭圆 项 部 单 击 并 输入 文字 “收藏 有 礼 ”， 然 后 打开 “字符 ”面板 ， 对 文字 的 属性 进行 调整 。 由 于 
此 文字 为 主 标题 文字 ， 所 以 把 字体 设置 为 较 粗 的 方正 超 粗 黑 简 体 ， 再 把 文字 颜色 设置 为 与 育 景 颜色 对 比较 明显 的 红色 。 


方正 超 粗 震 疝 .… 
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步骤 10 ”添加 红包 素材 并 输入 更 多 文字 


打开 素材 文件 13.psd， 选 择 “ 移 动工 具 ”， 把 红包 拖 至 文字 右 侧 。 选 择 “ 屋 排 文字 工具 ′， 在 红包 旁边 输入 文字 “优惠 券 
免费 送 "”， 答 入 后 发 现 文字 字号 与 “收藏 有 礼 ”的 字号 相同 ， 层 次 关系 没有 表现 出 来 ， 因 此 将 文字 字号 缩小 ， 得 到 更 有 表现 力 的 
文字 效果 ， 
Soo ~ 
< \ < 
一 0 六 一 
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步骤 11 用 “ 横 排 文字 工具 ”输入 红包 面额 


为 了 让 顾客 被 收 藏 区 的 红包 所 吸引 ， 还 需要 进行 红包 面额 的 设置 。 选 择 “ 横 排 文 字 工 具 ”， 在 红包 上 单 击 并 输入 数 
值 “20”， 输 入 后 的 文字 颜色 与 红包 颜色 过 于 接近 。 打 开 “ 字 符 ” 面 板 ， 把 文字 颜色 更 改 为 黄色 ， 使 得 红包 的 面额 更 能 引起 顾 


客 的 注意 。 


tT 100% 
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步骤 12 ”设置 “图 层 样 式 ” 使 文字 显得 更 立体 


执行 “图 层 > 图 层 样 式 > 和 斜面 和 浮雕 ” 菜 蛙 命令 ,打开 “图 层 样式 ”对 话 框 。 在 对 话 框 中 先 设置 “和 斜面 和 浮雕 ”样式 ， 让 文 
字 呈 现 立 体 的 浮雕 效果 ， 表 勾 选 “投影 ” 复 选 框 , 设置 “投影 ”的 各 项 参数 ， 为 红包 值 添 加 投影 效果 ，。 
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步骤 13 用 “钢笔 工具 ”绘制 不 规则 图 形 


为 了 吸引 顾客 ， 还 可 以 在 红包 下 方 输入 促销 信息 。 设 置 前 景色 为 R156、G15、B57， 使 用 “钢笔 工具 ”人 在 文字 下 方 绘制 红色 
的 多 边 形 ， 让 绘制 的 图 形 与 上 面 的 文字 风格 更 加 协调 。 


开 人 六 
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技巧 提示 : 更 改 图 形 外 形 


用 “钢笔 工具 绘制 图 形 后 ， 如 果 需 要 更 改 图 形 的 外 形 轮 廊 ， 可 选择 “直接 选择 工具 ， 然 后 单 击 图 形 上 的 锚 点 ， 调 整 其 位 
置 即 司 。 


步骤 14 用 “ 横 排 文字 工具 ”设置 并 输入 文字 


选择 “ 棋 排 文字 工具 ”， 打 开 “ 字 符 ” 面 板 ， 在 面板 中 把 文字 颤 色调 整 为 红色 ， 然 后 在 多 边 形 上 单 击 并 输入 文字 。 输 入 后 为 
突出 一 部 分 优惠 信息 ， 在 数值 “300” 和 “60” 上 单 击 并 拖 忠 ， 选 中 文字 ， 将 文字 的 颜色 更 改 为 黄色 ，。 


方正 综艺 简体 .… 


TT 100% 
| -上 6 目 
| 


步骤 15 完成 更 多 收藏 区 文字 的 设计 


续 使 用 “ 棋 排 文字 工具 ”在 下 方 绘制 文本 框 ， 然 后 在 文本 框 中 输入 文字 ， 输 入 后 打开 “段落 ”面板 ， 单 击 面板 中 的 “居中 
对 齐 文本 ”按钮 ， 对 齐 文字 ， 使 画面 的 视觉 中 心 点 更 为 集中 。 全 此 ， 已 完成 本 实例 的 制作 。 
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实例 121 手机 端 收 藏 区 应 用 设计 


本 实例 是 为 天 猫 手 机 端 设 计 的 收藏 区 应 用 效果 ， 由 于 手机 端的 版 面 非常 有 限 ， 所 以 其 收藏 区 多 来 用 默认 的 格式 。 在 设计 的 时 
候 ， 运用 “钢笔 工具 ”绘制 图 形 ， 通 过 创建 图 层 蒙 版 添加 小 朋友 图 像 ， 将 设置 好 的 图 像 作为 背景 ， 并 在 画面 中 添加 收藏 文字 信 


二 全 网 最 低 价 ， 这 一 刻 ， 束 购 了 


用 品 旗 秽 店 


素 材 ” 随 书 资源 素材 \14\16.jpg 
源 文件 ”” 随 书 资源 源 文件 \14 手 机 端 收藏 区 应 用 设计 .psd 


设计 分 析 


设计 要 点 01: 背景 中 采用 了 许多 不 同 颜 色 的 图 形 进 行 排列 、 组 合 ， 多 种 色彩 的 综合 应 用 使 得 版 面 更 能 显示 出 轻松 活泼 的 氛 


` 设计 要 点 02: 由 于 本 实例 是 为 手机 端 儿 童 用 品 店铺 设计 的 收藏 区 ， 所 以 针对 手机 端 天 猫 店铺 的 表现 方式 ， 用 简洁 的 图 形 和 
文字 将 重要 的 信息 有 效 地 表现 出 来 。 
版 式 分 析 


本 实例 把 画面 分 为 上 下 两 个 部 分 ， 上 半 部 分 用 不 同形 状 的 图 形 组 合 到 一 起 作为 背景 ， 把 小 朋友 的 照片 置 于 画面 的 视觉 中 心 位 
置 ， 并 在 右 侧 用 醒目 的 颜色 表现 “收藏 ”信息 ， 下 半 部 分 则 从 二 全 右 设计 导航 区 。 


配色 方案 


为 了 突出 店铺 中 商品 的 特点 和 消费 群体 ， 画 面 均 选 择 鲜艳 的 绿色 、 检 色 、 黄 色 搭配 ， 这 些 纯度 较 高 的 色彩 既 符 合 小 朋友 的 心 
理 特 征 ， 也 让 顾客 在 看 到 图 像 的 时 候 ， 一 眼 融 知道 该 店铺 主要 销售 的 商品 种 类 。 


技术 要 扣 


` 使 用 “钢笔 工具 ”在 背景 中 绘制 不 规则 图 形 ， 并 结合 选项 栏 中 的 参数 ， 将 绘制 图 形 填充 为 不 同 的 颜色 。 


- 使 用 “ 横 排 文 字 工 具 ” 在 图 形 劣 边 输入 文字 ， 并 结合 “字符 ”面板 更 改 文字 属性 。 


第 15 章 ”客服 区 设计 


1。 
[ 收 成 本店 


登 客服 中 心 


联系 手机 : 158"…"3045 


LE 


的 :mp 的 :5h6 的 :区 HH 的 :让 的: 


客服 在 线 时 间 
局 一 ~ 周 四 ( 早 9:00~ 晚 21:00 ) 


的 :FE85 的 :区 IF 的 :sy 的 :su 的:sa ee ate 


在 网 店 妆 修 设计 中 ， 除 了 店 招 、 导 航 、 欢 迎 模块 和 商品 细节 摘 述 等 区 城 的 设计 乙 外 ， 还 有 一 个 较为 重要 的 设计 点 ， 那 残 是 客 
服 区 。 网 店 的 客服 与 实体 店铺 中 的 售货员 的 作用 一 样 ， 通 过 在 网 店 页 面 中 添加 客服 区 ， 可 以 及 时 为 顾客 解决 疑惑 ， 提 高 网 店 的 服 
务 质量 ， 从 而 提高 顾客 的 回头 率 和 商品 的 成 交 率 。 网 店 客服 区 的 设计 大 致 包含 旺旺 头像 、 客 服 名 称 和 客服 服务 时 间 等 ， 有 时 为 了 
突显 店铺 的 专业 性 和 服务 品质 ， 还 会 在 设计 时 添加 妆 饰 性 元 素 ， 让 客服 区 显得 更 杀 切 、 美 观 。 


122 ”别致 淡雅 的 客服 区 设计 
123 水墨 风格 的 客服 区 设计 
124 ”彰显 品牌 风格 的 客服 区 设计 
125 ”突显 品质 的 个 性 客服 区 设计 
126 ”传统 的 侧 边 栏 客服 区 设计 
127 ”过 雅 风格 的 客服 区 设计 
128 规则 整齐 的 客服 区 设计 


129 ”音色 调 风格 的 客服 区 设计 


实例 122 ”别致 淡雅 的 客服 区 设计 


本 实例 是 为 某 家 居 用 品 店 设 计 的 客服 区 ， 在 设计 中 将 店铺 所 销售 的 家 居 饰 品 与 客服 区 组 合 在 一 起 ， 参 考 家 居 用 品 照 片 的 色彩 
和 风格 ， 使 画面 呈现 出 清新 、 别 致 的 感 狗 ， 将 客服 区 放置 在 家 居 用 品 图 像 上 ， 与 画面 主题 更 加 吻合 。 


so 


@ 家中 心 上 二 


工作 时 间 Lal in lone wilh bp 
周一 至 周 四 : 9:00-21:00 
周 五 至 周 日 : 8:30-23:00 


联系 方式 

联系 手机 : 158****3045 
满意 请 点 亮 每 一 颗 小 星星 哦 ! 
友 艳 让 认 全 


服务 态度 坟 多 计 娄 入 
发 货 速 度 食 食 食 食 
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素 材 。 随 书 资源 素材 15\01jpg、02.psd 
源 文 件 随 书 资源 \ 源 文件 \15\ 别 致 淡雅 的 客服 区 设计 .psd 
步骤 01 新 建文 档 并 复制 图 像 


启动 Photoshop 程 序 ， 新 建 一 个 文档 。 打 开 素 材 文 件 01Jjpg， 将 其 拖 钨 至 新 建文 件 中 ， 按 下 快捷 键 Ctrl+T， 对 图 像 的 大 小 
进行 适当 调整 ， 填 满 整个 文件 ， 用 作客 服 区 的 背景 。 
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步骤 02 用 “仿制 图 章 工 具 ” 修 复 图 像 


为 了 让 画面 更 为 干净 ， 可 以 对 背景 进行 简化 。 按 下 快捷 键 Ctrl+J， 复 制图 层 ， 创 建 “ 家 居 照 片 拷贝 ”图 层 ， 选 择 “仿制 图 章 
工具 ”， 按 住 Alt 键 不 放 ， 在 墙 面 转角 旁边 的 图 像 上 单 击 ， 取 样 图 像 ， 然 后 在 转角 处 涂抹 。 


1 本 时 TEL jie 
尼 盾 上 照片 


步骤 03 ”继续 修复 图 像 


继续 使 用 “仿制 图 章 工 具 ” 对 墙 面 进 行 修复 ， 去 挥 背景 中 多 余 的 | 门 、 墙 面 转 角 ， 使 画面 变 得 更 加 整洁 。 
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步骤 04 设置 “曲线 ”调整 曝光 


去 挥 背 景 杂 物 后 ， 友 现 照片 因为 阳 光 不 足 ， 整 体 偏 瞳 ， 男 面 显得 比较 脏 ， 因 此 需要 将 其 提 亮 。 创 建 “ 曲 线 1” 调 整 图 层 ， 打 
开 “ 属 性 ”面板 ， 在 面板 中 先 选 择 “ 蓝 ”通道 ， 单 击 并 向 上 拖 忠 曲线 ， 提 亮 蓝 通道 图 像 ， 再 选择 RGB 通 道 ， 单 击 并 向 上 拖 外 曲 
线 ， 提 亮 图 像 。 


步骤 05 用 “ 男 笔 工具 ”编辑 蒙 版 


提 亮 图 像 后 ， 友 现 图 像 右 侧 有 部 分 图 像 出 现 了 曝光 过 度 的 情况 。 单 击 “ 曲 线 1” 图 层 蒙 版 ， 选 择 “ 男 笔 工 具 ”， 将 前 景色 设 
置 为 黑色 ， 用 画笔 在 曝光 过 度 的 区 域 涂 抹 ， 还 原 涂抹 区 域 的 图 像 的 亮度 。 


| 入 


步 又 06 调整 “可 选 颜 色 ” 增 强 色 彩 


为 了 突出 背景 中 的 闭 饰 元 素 ， 接 下 来 还 可 以 对 色彩 进行 调整 ， 观 察 图 像 友 现 育 景 中 红色 化 沙 和 青色 叶子 的 颜色 太 过 暗淡 。 创 
建 “选取 颜色 1” 调 整 图 层 ， 打 开 “ 属 性 ”面板 ， 在 面板 中 选择 对 应 的 “红色 ”和 “青色 ”选项 ， 调 整 颜 色 特 分 比 ， 增 强 色 彩 。 


步骤 07 用 “ 色 阶 ” 提 亮 中 间 调 区 域 


经 过 调整 感 周 图 像 还 是 显得 不 够 亮 ， 无 法 营造 出 温馨 的 氛围 。 创 建 “ 色 阶 1” 调 整 图 层 ， 打开“ 属性 ”面板 ， 在 面板 中 单 
击 “ 预 设 ” 下 拉 按 钮 ， 在 展开 的 下 拉 列 表 中 选择 “中 间 调 较 亮 ”选项 ， 提 亮 中 间 调 部 分 。 


中 问 周 较 亮 


步骤 08 ”应 用 渐变 调整 图 层 蒙 版 


提 亮 图 像 后 ， 由 于 右 侧 部 分 图 像 太 亮 了 ， 因 此 单 击 “ 色 阶 1” 图 层 蒙 版 ， 选 择 “ 渐 变 工 具 ”， 并 在 选项 栏 中 选择 “ 黑 ,， 日渐 
变 ”， 从 图 像 右 侧 向 左 拖 蝶 线性 渐变 。 这 时 蒙 版 石 侧 显示 为 黑色 ， 即 还 原 了 右 侧 图 像 的 亮度 。 


计 取 识 色 1 


步骤 09 设置 “曲线 ” 提 亮 图 像 


创建 “曲线 2” 调 整 图 屋 ,， 打开“ 属性 ”面板 ， 在 面板 中 单 击 并 向 上 拖 忠 曲线 ， 进 一 步 提 亮 图 像 ， 得 到 非常 唯美 的 背景 效 


技巧 提示 : 通过 绘制 修改 曲线 


用 “曲线 ”调整 图 像 的 亮度 时 ， 除 了 可 以 通过 拖 慢 鼠标 的 方式 来 调整 外 ， 也 可 以 单 击 “ 通 过 绘制 来 修改 曲线 ”按钮 吕 ， 然 
后 在 曲线 中 单 击 并 绘制 线条 进行 图 像 影 调 的 设置 。 


步骤 10 ”绘制 并 羽化 选区 


由 于 画面 两 侧 相 对 较 腕 ， 而 中 间 部 分 看 起 来 相对 要 暗 一 些 ， 因 此 选择 “和 窍 形 选 框 工具 ”， 在 画面 中 间 位 置 单 击 并 拖 暇 鼠标 ， 
绘制 矩形 选区 。 执 行 “ 选 择 > 修 改 > 羽 化 ”菜单 命令 ,羽化 选区 。 


羽化 半径 (R): 学 素 


| | 应 用 图 布 壹 卉 的 效果 取消 | 


步骤 11 编辑 调整 图 层 蒙 版 


这 里 需要 还 原 两 侧 偏 亮 的 图 像 ， 按 下 快捷 键 Shift+Ctrl+1， 反 选 选区 ， 单 击 “ 曲 线 2” 图 层 蒙 版 ， 将 前 景色 设置 为 黑色 ， 按 
下 快捷 键 Alt+ Delete， 将 选区 填充 为 黑色 。 此 时 画面 中 选区 内 的 图 像 将 还 原 至 曲线 调整 前 的 效果 。 


1 © 7 


步骤 12 根据 “色彩 范围 ”选择 图 像 


为 了 让 画面 的 颜色 更 加 漂亮 ， 可 对 图 像 进行 着 色 。 单 击 “ 家 居 照 片 拷 贝 ”图 层 ,执行 “选择 > 色彩 学 围 ” 菜 时 命令 ， 打 
开 “ 色 彩 沁 围 ”对 话 框 ， 在 对 话 框 中 选择 “高 光 ” 选 项 ， 单 击 “ 确 定 ” 按 钮 ， 将 照片 的 高 光 部 分 添加 至 选区 中 。 


选择 (CC): | 高光 3 
检测 人 脸 (D: 本 地 化 颜色 铸 (Z) \ 
颜色 容 差 (PF); 20 |% 


(@) 选择 范围 (E) ”中 图 你 (M) 


步骤 13 创建 “纯色 ” 填 元 图 像 


单 击 “ 图 层 ” 面 板 中 的 “创建 新 的 填充 或 调整 图 层 ” 按 钮 了 ， 在 打开 的 列表 中 单 击 “ 纯 色 ” 选 项 ， 打 开 “ 拾 色 器 ( 纯 
色 ) ”对 话 框 ， 在 对 话 框 中 设置 填充 颜色 为 R228、G218、B226。 设 置 后 为 了 让 填充 颜色 与 背景 融合 ， 再 将 “颜色 填充 1” 图 层 
的 混合 模式 更 改 为 “正片 革 底 ”，“ 不 透明 度 ” 设 置 为 50%。 


不 ] 秀 明度 : 50% 
中 而 填充 : 100% 
c ， 国 3 有， 所 色 过 充 1 


步骤 14 ”绘制 矩形 调整 不 透明 度 


经 过 前 面 的 操作 ， 完 成 了 背景 图 像 的 处 理 ， 接 下 来 融 是 客服 信息 的 设计 。 先 创建 “文字 摘 述 ”图 层 组 ， 选 择 “ 窍 形 工 具 ”， 


在 画面 元 侧 单 击 并 拖 擅 鼠标， 绘制 一 个 日 色 的 起 形 ， 绘 制 后 可 以 适当 降低 图 形 的 不 透明 度 。 


填充 : 100% 
[ ms le mr 本 
国 0 颜色 填充 1 


步骤 15 ”使 用 “ 目 定 形状 工具 ”绘制 图 案 


针对 店铺 中 家 届 商 品 的 风格 ， 可 以 在 客服 区 添加 欧式 人 花纹 加 以 委 饰 。 选 择 “ 目 定形 状 工具 ”,， 单 击 “ 填 元 ” 右 侧 的 下 拉 按 
钮 ， 在 展开 的 下 拉 列 表 中 设置 填充 颜色 ， 设 置 后 再 单 击 “ 形 状 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 “形状 ” 拾 色 器 中 单 击 “ 委 饰 2” 形 
状 ， 在 日 色 的 算 形 项 部 单 击 并 拖 忠 女 标 ， 绘 制图 形 。 


步骤 16 绘制 图 形 添加 文字 


选择 “和 矩形 工具 ”， 继 续 在 绘制 的 花纹 图 像 下 绘制 一 个 矩形。 为 了 让 图 形 更 有 创意 ， 绘 制 后 结合 路 径 编 辑 工 具 对 和 粉 形 的 外 形 
进行 调整 ， 然 后 使 用 “ 横 排 文字 工具 ”在 图 形 中 间 输 入 文字 “收藏 本 店 ”。 


A 
收藏 本 后 


步 又 17 添加 旺旺 图 像 


既然 是 制作 客服 区 ， 那 么 旺旺 图 像 肯 定 是 不 能 少 的 。 打 开 素 材 文 件 02.psd， 将 图 像 拖 所 至 绘制 的 图 形 下 方 ， 然 后 选择 “ 横 
排 文 字 工 具 ”， 在 旺旺 图 像 旁 边 输 入 文字 “客服 中 心 ”。 


步骤 18 使 用 “ 横 排 文字 工具 ”输入 更 多 文字 


为 了 让 顾客 了 解 更 多 的 客服 信息 ， 继 续 使 用 “ 横 排 文字 工具 ”在 画面 中 输入 相关 的 客服 工作 时 间 、 在 线 容 询 及 联系 万 式 等 。 
输入 后 复制 旺旺 图 像 ， 创 建 “ 旺 旺 拷 贝 ” 图 层 ， 调 整 图 层 中 旺旺 图 像 的 大 小 和 位 置 。 


[ 收藏 本 店 > 必 
下 客服 中 心 和 四 : 0900-21:00 


全 周 日 : 8: 3:30-23:00 


工作 时 间 
周一 至 周 四 : 9.00-21:00 
” 周 五 至 周 日 : 8:30-23:00 


联系 手机 : 158****3045 


满意 请 点 亮 每 一 颗 小 星星 哦 ! 


步骤 19 使 用 “ 圆 角 窍 形 工具 ”绘制 图 形 


添加 旺旺 图 像 后 ， 为 了 突出 旁边 的 “和 我 联系 ”字样 ， 可 以 为 文字 设置 醒目 的 背景 。 选 择 “ 圆 角 窍 形 工具 ”， 企 选项 栏 中 单 
击 “ 填 充 ” 右 侧 的 下 拉 按 钮 ， 在 展开 的 下 拉 列 表 中 设置 填充 选项 并 调整 描 边 选项 后 设置“ 半径 ”为 3 像素 ， 在 文字 “和 我 联 
系 ” 处 单 击 并 拖 蝶 鼠标 ， 绘 制图 形 。 


步 又 20 绘制 不 规则 图 形 


设置 前 景色 为 R208、G169、B150， 选 择 “ 钢 笔 工具 ”， 在 文字 下 方 连续 单 击 ， 绘 制 不 规则 图 形 。 绘 制 后 选择 “多边形 工 
具 ”， 设置 “ 边 数 " 为 5， 在 图 形 旁 边 绘制 星 星 图 形 。 


联系 方式 
联系 于 机 


步骤 21 在 图 形 中 添加 文字 


连续 按 下 快捷 键 Ctrl+J， 复 制 多 个 星星 图 形 ， 
进行 更 多 图 形 及 文字 的 设计 ， 完 成 本 实例 的 制作 。 


使 用 同样 的 方法 ， 


[ 收藏 本 店 
合 客 县 中 心 


工作 时 间 


:2 


在 纯 青 出 


联 和 看 上 少 式 
8 


Li 


滑 认 全 点 这 - 番 小 星星 哦 ! 


158 3045 


联系 方式 
联系 手机 : 


， Se 
发 上 汪 
， ri in re re ae 


调整 位 置 后 得 到 并 排 的 星星 效果 。 用 “ 横 排 文字 工具 " 


158™™ 3045 


直下 力 海 


在 图 形 上 输入 文字 ， 再 


实例 123 ”水 墨 风格 的 客服 区 设计 


本 实例 是 为 一 家 销售 条 叶 的 店铺 所 设计 的 客服 区 。 茶 是 中 华 民族 的 国 饮 ,具有 悠久 的 历史 ， 在 设计 时 利用 传统 的 水 墨 画 风格 
将 商品 的 特色 表现 出 来 ， 同 时 ， 在 文字 的 搭配 上 ， 使 用 行书 风格 的 字体 对 主题 加 以 说 明 ， 营 造 出 更 加 古朴 的 艺术 氛围 。 


EW、 y 以 茶 相 擒 用 心服 务 
交 居 笔 从 龙 特 色 服 务 团队 茶 友 接待 : 30-00: 59 


国王 道 区 流 团 队 业界 良心 优质 服务 网 购 条 友 必 体验 服务 热线 : 400-401-402 


悍 厅 当 由 省 | 首 


找 他 服务 仿 


一 一 一 
3 | 


素 材 随 书 资 源 \ 素 材 \15\02.psd 一 05.psd， 水 墨 01、 水 墨 02.abr 


十 


源 文 件 随 书 资源 \ 源 文件 \15\ 水 墨 风格 的 客服 区 设计 .psd 


步骤 01 ”新 建 图 层 填充 育 景 


司 动 Photoshop 程 序 ， 新 建 一 个 文档 。 新 建 “ 图 层 1” 图 层 ， 设 置 前 景色 为 R230、G230、B230， 按 下 快捷 键 Alt+ Delete， 
将 背景 填充 为 灰色 ， 使 其 与 “水 墨 风格 ”主题 更 加 吻合 . 


OR 1230 


.7G: ] 230 


DB |230 


去 e6e6e6 


本 /人 上 由， ED -一 一生 
VEYA LI 人 -| 下 | = 
- 蕊 一 由， 中 \ 到 F 


既然 是 水 墨 风格 ， 那 么 水 墨 元 素 自 然 是 必 不 可 少 的 。 载 入 “水 墨 01” 画 笔 ， 在 “画笔 预 设 ”选取 器 中 单 击 要 载 入 的 画笔 ， 
调整 其 大 小 后 ， 单 击 “ 图 层 ” 面 板 中 的 “创建 新 图 层 ”按钮 ， 新 建 “ 图 层 2” 图 层 ， 将 前 景色 设置 为 黑色 ， 在 育 景 左 侧 连 续 单 击 
两 次 ， 绘 制 墨 点 。 


载 入 “水 墨 02” 画 笔 ， 在 “画笔 预 设 ”选取 器 中 单 击 要 载 入 的 画笔 ， 调 整 画 笔 大 小 后 ， 单 击 “ 图 层 ”面板 中 的 “创建 新 图 
层 ” 按 钮 ， 新 建 “ 图 层 3” 图 层 ， 将 前 景色 设置 为 黑色 ， 在 背景 处 单 击 ， 绘 制 墨 点 。 


大 小 ”4 470 像 囊 


打开 素材 文件 03.psd， 把 图 像 复制 到 墨 点 图 案 下 方 ， 为 了 让 边框 呈现 更 目 然 的 效果 ， 需 要 对 其 边 绿 进行 调整 。 选 择 “画笔 


工具 ”， 在 “画笔 预 设 ”选取 器 中 单 击 “ 水 彩 水 洗 ” 画 笔 ， 调 整 男 笔 大 小 。 


将 鼠标 移 到 边框 元 侧 ， 单 击 并 涂抹 ， 在 涂抹 的 过 程 中 ， 可 以 按 下 键盘 中 的 [或 ] 键 ， 调 整 画 笔 笔 触 大 小 。 经 过 反复 的 涂抹 操 
作 ， 可 以 看 到 边框 边缘 呈现 目 然 的 渐 隐 效果 。 


为 了 让 边框 表现 目 然 的 磨损 效果 ， 选 择 “画笔 工具 ”， 人 在 “画笔 预 设 ” 选 取 器 中 单 击 “ 顺 枪 硬 边 低 密 度 粒 状 ” 画 笔 ， 调 整 画 


笔 大 小 ， 然 后 在 边框 边 绿 涂 抹 。 


步骤 07 使 用 “吸管 工具 ”吸取 颜色 


按 下 键盘 中 的 [或 ] 键 ， 调 整 男 笔 笔触 大 小 ， 经 过 反复 的 涂抹 操作 ， 隐 藏 部 分 边框 图 像 。 为 了 便于 后 面 在 边框 中 输入 文字 ， 可 
以 对 边框 内 部 的 图 像 填 殉 颜色 ， 将 除 育 景 和 边框 图 像 外 的 所 有 图 层 隐 藏 ， 选 择 “ 吸 管 工 具 ”， 将 鼠标 移 公 边框 内 部 单 击 。 


步骤 08 根据 “色彩 范围 ”选择 图 像 


执行 “选择 > 色彩 范围 ”菜单 命令 ,打开 “色彩 范围 ”对 话 框 ， 在 对 话 框 中 将 “颜色 容 舌 ”调整 为 100， 此 时 可 以 看 到 边框 
外 的 其 他 部 分 显示 为 日 色 ， 单 击 “ 确 定 ” 按 钮 ,创建 选 区 。 新 建 “ 颜 色 填 充 1” 调 整 图 层 ， 将 填充 头 色 设置 为 R230、G230、 
B230。 


选择 fj: | -4 职 样 颜色 | 


检测 人 具 fo) “ 口 ] 二 地 化 颜色 策 加 
颜色 容 差 (F]: 


| | 


导 | 选择 范围 (E】]】 ”人 图 称 (M) 


步骤 09 ”使 用 “起 形 工具 ”绘制 选区 


由 于 此 处 只 需要 对 边框 内 部 进行 颜色 填 序 ， 因 此 单 击 “颜色 填充 1” 调 整 图 层 蒙 版 ,选择 “矩形 选 框 工具 ”， 单 击 “ 添 加 到 
选区 ”按钮 ， 在 除 边框 内 部 以 外 的 背景 位 置 单 击 并 拖 忠 鼠标 ， 绘 制 选区 。 设 置 前 景色 为 黑色 ， 按 下 快捷 键 Alt+ Delete， 将 该 区 
域 蒙 版 填充 为 黑色 ， 隐 藏 填充 颜色 。 


加 唱 拉 串 羽化 : 0 像素 


步骤 10” 竺 印 图 层 


选择 边框 所 在 的 “图 层 4” 和 和 上方 的 “颜色 填充 1” 图 层 ， 按 下 快捷 键 Ctrl+Alt+E， 羡 印 选中 图 层 ， 得 到 “颜色 填充 1 ( 合 
并 ) ”图 层 。 选 择 “ 移 动工 具 ”， 单 击 并 向 右 拖 虹 鼠 标 ， 移 动 盖 印 的 边框 图 像 的 位 置 。 


用 颜色 填充 1 (合并 》 


国 w= 颜色 填充 1 
一 


步骤 11 载 入 并 复制 选区 内 的 图 像 


为 了 得 到 更 多 的 边框 效果 ， 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 4” 图 层 蒙 版 ， 载 入 选区 ， 选 择 边 框 部 分 ， 再 单 击 “ 图 层 4” 图 层 缩 
览 图 ， 按 下 快捷 键 Ctrl+J， 复 制 选区 内 的 图 像 ， 得 到 “图 层 5” 图 层 。 选 择 “ 移 动工 具 ”， 移 动 “ 图 层 5” 图 层 中 的 边框 图 像 ， 调 
整 其 位 置 ， 得 到 并 排 的 边框 效果 . 


步骤 12 ”添加 蒙 版 编辑 图 像 


连续 按 下 快捷 键 Ctrl+J， 复 制图 层 ,， 创 建 “ 图 层 5 拷 贝 ” 和 “图 层 5 拷 贝 2” 图 层 ， 为 复制 的 图 层 添加 蒙 版 ， 使 用 黑色 画笔 涂 
抹 边 框图 像 ， 得 到 更 加 自然 的 衔接 效果 。 


步骤 13 创建 “黑白 ”调整 图 层 


打开 素材 文件 04.psd， 将 图 像 复制 到 客服 区 图 像 上 。 由 于 此 画面 整体 为 黑 昌 多， 所 以 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 6 
层 , 载 入 选区 ， 新 建 “ 黑 日 1” 调 整 图 层 ， 将 图 像 转换 为 黑 日 效果 。 


步骤 14 复制 图 形 并 添加 二 维 码 效果 


继续 使 用 同样 的 方法 ， 复 制 更 多 的 边框 图 像 。 根 据 画 面 的 整体 效果 ， 添 加 图 层 花 版 ， 隐 藏 部 分 边框 图 像 后 ， 打 开 素 材 文 件 
05.psd， 将 其 复制 到 边框 图 像 上 。 


次 训 


步骤 15 使 用 “ 模 排 文字 工具 ”输入 文字 


经 过 前 面 的 操作 ， 完 成 了 水 墨 背景 图 像 的 制作 ， 接 下 来 就 是 客服 信息 的 添加 。 选 择 “ 横 排 文 字 工 具 ”， 在 画面 中 输入 对 应 的 
客服 信息 。 为 了 让 文字 表现 出 层次 感 ， 输 入 后 可 结合 “字符 ”面板 调整 文字 大 小 、 颜 色 、 字 体 等 。 


匡 : 居 堂 茶 龙 特色 服务 团队 %4 RS 


四 省 交流 团队 业界 良心 优质 服务 网 购 茶 友 必 体验 服务 热线 ，400-401-402 


sr 


Er 


- 笛 林 涯 吕 测 1 首 ， 


步骤 16 ”添加 旺旺 图 像 


最 后 打开 素材 文件 02.psd， 选 择 “ 移 动工 具 ”， 把 旺旺 图 像 复制 到 文字 “客服 中 心 ”旁边 ， 按 下 两 次 快捷 键 Ctrl+J， 复 制 两 
个 旺旺 头像 ， 分 别 移 到 两 处 “ 找 他 服务 ”和 旁 边 。 根 据 和 版 面 适当 缩放 旺旺 头像 ， 完 成 本 实例 的 制作 。 


六 文字 
[ema | 到 
Ce 旺旺 头像 拷 风 2 
加 旺旺 头像 拷贝 
一 对 旺旺 头像 


I 于 | = 以 荣 相 携 用 心服 务 
大 党 茶 龙 特色 服务 团队 革 友 接待 ，B，30-00，69 


国道 交流 团队 业界 良心 优质 服务 网 购 茶 友 必 体验 服务 热线 . 400-401-402 


Dr 


找 他 服务 令 


实例 124 “彰显 品牌 风格 的 客服 区 设计 


本 实例 是 为 某 有 机 蔬菜 店 设计 的 客服 区 ， 在 设计 中 使 用 清新 的 绿色 为 背景 色 ， 与 店铺 中 所 销售 蔬菜 的 绿色 、 健 康 的 特点 相 呼 


应 ， 同 时 在 画面 中 添加 了 一 毕 妆 饰 性 的 菠菜 叶子 、 关 椒 等 元 素 ， 丰 富 画 面 的 同时 也 加 深 了 画面 的 感染 力 。 


一 
i 和 | 下 
客服 中 心 [~ 上 班 时 间 早上 09 : 00 一 一 凌 展 12 : 00 bag 了 


林 林 喝 和 我 联系 ” 果 果 。 他 和 我 联系 本 糖 糖 ”他 和 我 联系 非常 感谢 您 到 林 林 家 原生 态 有 机 蔬菜 旗舰 店 购物 ， 如 果 您 
安 客 对 我 们 的 商品 及 服务 满意 ， 请 给 我 们 五 分 好 评 ， 激 励 我 们 为 亲 


服 ” 亚 亚 中 和 我 联系 “” 苦 茜 。 哆 和 我 联系 服 ” 沁 沪 ” 鸭 和 我 联系 们 提供 更 优质 的 网 购 服务 ， 期 待 您 的 下 次 光临 ! 


大 牛 
THMALLCOM 


7 天 无 理由 退换 货 。 ”正品 保证 ， 天 猫 商 场 实物 拍摄 保障 


We 


素 ” 材 ” 随 书 资源 \ 素 材 \15\02.psd，06.jpg，07.psd~09.psd 


源 文 件 ”” 随 书 资源 源 文件 15\ 彰 显 品牌 风格 的 客服 区 设计 .psd 


步骤 01 在 新 建 的 文件 中 为 背景 填充 颜色 


启动 Photoshop 程 序 ， 新 建 一 个 文档 。 将 前 景色 设置 为 R206、G233、B153， 按 下 快捷 键 Alt+ Delete， 用 设置 的 前 景色 填 
充 背 景 ， 定 义 客服 区 的 整体 风格 。 


步骤 02 根据 “色彩 范围 ”选择 云 灯 


打开 素材 文件 06.jpg， 执 行 “ 选 择 > 色 彩 范 围 ” 菜 单 命令 , 打开 “色彩 范围” 对 话 框 ， 在 对 话 框 中 用 吸管 工具 在 天 空中 的 云 
水 位 置 单 击 ， 设 置 选择 光 围 ， 单 击 “ 确 定 ”按钮 ， 选 择 图 像 。 


选择 [只 职 样 颜 名 | 


检 利 小 胜 [0) 站 本 地 比 着 色 狗 包 ) 
头 色 罕 莽 [F): 38 


步骤 03 ”复制 图 像 并 调整 大 小 


为 了 让 背景 图 像 显 得 更 加 丰富 ， 选 择 “ 移 动工 具 ”， 把 选区 中 的 云 米 图 像 复 制 到 纯色 的 背景 中 ， 按 下 快捷 键 Ctrl+T， 打 开 目 


由 变换 编辑 框 ， 将 云 灯 调整 至 合适 大 小 。 


步骤 04 ”调整 不 透明 度 


添加 云 打 后 友 现 颜色 太 亮 ， 显 得 不 目 然 。 选 中 “图 层 1” 图 层 中 的 云 米 图 像 ， 将 “不 透明 度 ” 降 低 至 16%， 单 击 “ 湛 加 图 层 
蒙 版 ”按钮 加 |， 在 云 洒 边缘 位 置 用 黑色 画笔 涂抹 ， 使 云 扩 与 下 方 的 背景 衔接 更 加 自然 。 


正 军 = 十 秋 明度 : 16% 
HE: 转 中 四 填充 : 100% 


YH 衣 景 
ES RS， 图 层 : 
国语 |] 计 1 


步骤 05 复制 图 像 并 调整 位 置 


按 下 快捷 键 Ctrl+J， 复 制 云 灯 图像 ， 得 到 “图 层 1 拷 贝 ”图 层 。 执 行 “ 编 辑 > 变换 > 水 平 翻转 ”菜单 命令 ,水平 翻转 复制 的 云 
水 图 像 ， 然 后 将 其 移 至 画面 的 另 一 侧 。 


Fe : , a a 
Eh 图 层 1 拷贝 
es 图 层 1 
步骤 06 使 用 “ 套 索 工具 ”选择 图 像 


打开 素材 文件 07.psd， 选 择 工具 箱 中 的 “ 套 索 工具 ”， 人 在 右 侧 的 蔬菜 叶子 位 置 单 击 并 拖 蝶 鼠标 ,创建 选区 ， 选 择 图 像 ， 然 
后 用 “移动 工具 ”把 选区 中 的 图 像 拖 蝶 至 客服 区 图 像 上 ， 得 到 “图 层 2” 图 层 。 


步骤 07 复制 更 多 的 叶子 效果 


连续 按 下 多 次 快捷 键 Ctrl+J， 复 制 更 多 叶子 图 像 ， 分 别 选择 各 图 层 中 的 图 像 ， 按 下 快捷 键 Ctrl+T， 打 开 上 自由 变换 编辑 框 ， 调 
整编 辑 框 中 的 叶子 大 小 和 位 置 后 ， 按 下 Enter 键 ， 应 用 变换 效果 ， 得 到 自由 分 布 的 叶子 效果 。 将 “图 层 2” 人 至 “图 层 2 拷 贝 7” 图 
层 的 “不 透明 硫 ” 设 置 为 25%， 降 低 不 透明 效果 。 


* 不 透明 麻 ; 25% 
让 看 填充 : 100% 


QT 吕 背景 
有 三， 图 层 2 拷贝 7 
国 量 图 层 2 拷贝 6 


步骤 08 使用“ 套 系 工具 ”选择 图 像 


打开 素材 文件 07.psd， 选 择 工 具 箱 中 的 “ 套 索 工具 ”， 人 在 左 侧 的 蔬菜 叶子 位 置 单 击 并 拖 蝶 鼠标 ,创建 选区 ， 选 择 图 像 ， 然 
后 用 “移动 工具 ”把 选区 中 的 图 像 拖 岛 至 客服 区 图 像 上 ， 得 到 “图 层 3” 图 层 。 


步骤 09 创建 “纯色 ” 填 元 图 像 


为 了 让 画面 更 有 新 意 ， 可 以 对 叶子 的 颜色 做 更 改 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 3” 图 层 缩 览 图 ， 载 入 选区 。 新 建 “ 颜 色 填 
充 1” 调 整 图 层 ， 打开 “ 拾 色 器 (纯色 ) ”对 话 框 ， 在 对 话 框 中 设置 填充 颜色 为 R84、G169、B205。 选 择 “ 颜 色 填充 1” 图 层 ， 
将 混合 模式 设置 为 “色相 ”。 


100% 


奖 色 填充 1 


步骤 10 ”输入 文字 添加 妆 饰 元 素 


经 过 前 面 的 操作 ， 完 成 了 背景 的 设置 ， 接 下 来 进行 客服 信息 的 添加 。 选 择 “ 横 排 文字 工具 ”， 在 画面 项 部 输入 文字 ， 为 了 让 
输入 的 文字 更 有 层次 感 ， 对 输入 文字 的 字体 、 大 小 进行 调整 。 打 开 素 材 文 件 09.psd， 将 其 复制 到 文字 “收藏 有 礼 ” 的 左 侧 。 


客服 中 心 上 班 时 间 


CUSTOMER SERVICE WORK SHIFT 早上 09 : 00 一 一 度 层 12.200 


全 了 国标 下 又 字 


步骤 11 添加 旺旺 和 时 间 元 素 


打开 素材 文件 02.psd 和 08.psd， 将 打开 的 图 像 分 别 复制 到 “客服 中 心 ” 和 “上 班 时 间 ” 前 ， 让 顾客 更 加 清 竹 各 部 分 要 表现 
的 主要 信息 。 


上 班 时 间 


DD cuUsTOMER SERVICE C1 WORK SHIFT 


步骤 12 ”设置 “ 潭 变 晋 加 ”样式 更 改 颜色 


添加 时 间 元 素 后 ， 友 现 其 颜色 与 整体 色调 不 协调 ， 需 要 对 颜色 进行 修饰 。 执 行 “ 图 层 > 图 层 样式 > 渐变 蔷 加 ”菜单 命令 , 打 
开 “ 图 层 样 式 ” 对 话 框 ,设置 从 浅 绿色 到 深 绿色 的 新 变 颜 色 ， 设 置 后 单 击 “ 确 定 ” 按 钮 ， 应 用 渐变 苞 加 效果 。 


新 受 登 加 


se | (上班 时 间 


-和 委 明度 (P): 宇 > [100 医 
> 
样式 : [ 线 竹 。 ”|] 思 与 图 居 


WORK SHIFT 


前 度 (N): ( ~) -35 | 度 ”|[ 二 要 对 齐 | 


编 和 (9): ”|100 |% 


”设计 轴 认 值 | | 矶 这 为 味 认 值 | 


步骤 13 ”输入 客服 信息 


创建 “客服 ”图 层 组 ， 选 择 “ 直 排 文字 工具 ”， 在 “客服 中 心 ” 下 万 输 入 “ 售 前 客服 ”， 再 选择 “ 横 排 文字 工具 ”， 在 “ 售 
前 客服 ”旁边 输入 客服 名 “ 林 林 ”。 输 入 后 选择 “ 圆 角 和 矩 形 工 具 ”， 绘 制 一 个 日 色 的 矩形 ， 用 于 指定 客服 联系 万 式 。 


Or 总。 和 拒 联 系 


反 巧 提示 : 将 图 层 移入 或 移出 图 层 组 


用 图 层 组 可 以 帮助 人 们 更 好 地 管理 图 层 ， 在 Photoshop 中 选中 图 层 后 ， 将 其 拖 慢 至 创建 的 图 层 组 上 ， 即 可 将 选中 图 层 移入 图 
层 组 。 如 果 要 将 图 层 组 中 的 图 层 移出 ， 则 选中 图 层 并 将 其 抱 息 至 图 层 组 外 的 其 他 位 置 。 


步骤 14 ”设置 图 层 样 式 


为 了 让 绘制 的 圆 角 和 矩 形 更 加 出 彩 ， 双 击 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 先 单 击 “ 和 斜面 和 浮雕 ”样式 ， 设 置 样式 选项 ， 增 强 
图 形 的 立体 感 ， 再 单 击 “ 渐 变 亚 加” 样式， 设置 从 黄色 到 日 色 的 渐变 颜色 ， 然 后 单 击 “ 拍 边 ” 样 式 ， 设 置 摘 边 颜色 为 黄色 。 
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步骤 15 ”应 用 样式 效果 


设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 应 用 图 层 样 式 ， 此 时 可 看 到 更 有 立体 感 的 浮雕 按钮 。 打 开 旺 旺 图 像 ， 将 其 复制 到 按钮 上 方 ， 
然后 选用 “ 横 排 文 字 工具 ”在 旺旺 图 像 蓉 输 入 文字 “和 我 联系 ”。 


步骤 16 ”继续 添加 更 多 文字 和 图 案 


由 于 店铺 中 的 客服 人 员 不 止 一 个 ， 所 以 选择 “和 我 联系 ”图 层 组 ， 连 续 按 下 快捷 键 Ctrl+J， 复 制 多 个 客服 按钮 ， 然 后 调整 其 
排列 方式 ， 在 每 个 按钮 旁边 输入 客服 人员 的 姓名 ， 最 后 为 了 增强 顾客 的 信任 感 ， 结 合 文 字 工具 和 图 形 绘制 工具 企画 面 最 下 方 添加 
无 理由 退换 货 、 正 品 保证 等 信息 ， 完 成 本 实例 的 制作 。 


后 非常 感谢 您 到 林 林 家 原生 态 有 机 忒 菜 旗舰 店 购物 ， 如 果 您 


, 客 对 我 们 的 商品 及 服务 满意 ， 请 给 我 们 五 分 好 评 ， 激 励 我 们 为 亲 
亚 亚 ” 峡 相 扶 导 系 。 苦 苗 全 相 我 怀 交 上 服 泡 汪 二 同 我 肝素 们 提供 更 优质 的 网 购 服务 ， 期 待 您 的 下 次 光临 ! 


林 林 性 和 有 了 和 示 。 果 果 | 糖 糖 ” 转 各 开 联系 


客服 中 心 上 班 时 间 


CLUEST NE SER WE Wk SH 1 00— 1 <: 00 


林 栋 ”二 癌 记 肛 示 糖 糖 ” 旺 和 我 联 和 示 
后 


非常 感谢 您 到 林 林 家 原生 态 有 机 萝 菜 旗舰 店 购物 ， 加 果 您 
| 对 我 们 的 商品 及 服务 满意 ， 请 给 我 们 五 分 好 评 ， 激 励 我 们 为 亲 
亚 亚 ”加 补 拉 屏 东 。 苗 著 同和 技 联 系 ,上 服 沁 证 网 各 我 到 和 冰 ， 们 提供 更 优质 的 网 购 服务 ， 期 待 您 的 下 次 光临 


me er en em es "EE En re mn ee em me me ee ey er ml ee es 


[可 | 证 | ,起 | | 回 


7 天 无 理由 退换 货 正品 保证 天 猫 商 场 ， ， 实物 拍摄 保障 


实例 125 ”突显 品质 的 个 性 客服 区 设计 


本 实例 是 为 某 白 董 销售 店 设计 的 客服 区 ， 在 设计 时 选择 了 可 以 市 来 视 党 冲击 的 黄色 旧 纸张 纹理 作为 背景 ， 这 样 的 设计 方式 更 


AL 人、 


符合 店铺 中 的 丙 品 特征 。 此 外 ， 由 于 喜欢 收藏 和 购买 古董 的 人 大 多 追求 质感 ， 所 以 在 客服 图 像 的 安排 上 及 用 了 工整 的 排列 万 式 ,， 
方便 顾客 选择 与 咨询 。 


和 ah e An 一 -sw 
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= 素 材 。 随 书 资源 \ 素 材 15\02.psd，10.jpg 一 13jpg，11.psd 


2 源 文 件 随 书 资 源 \ 源 文件 \15\ 突 显 品质 的 个 性 客服 区 .psd 


步骤 01 创建 图 层 组 复制 图 像 


启动 Photoshop 程 序 ， 新 建 一 个 文件 。 打 开 素 材 文 件 10.jpg， 选 择 “ 移 动工 具 ”， 把 图 像 拖 忠 至 新 建文 件 中 ， 得 到 “纹理 
背景 ”图 层 , 按 下 快捷 键 Ctrl+T， 打 开 上 自由 变换 编辑 框 ， 调 整编 辑 框 中 背景 图 像 的 大 小 。 


ODO eee, 纹理 背 最 
DO ee 元 


步骤 02 ”设置 “投影 ”样式 添加 投影 


打开 素材 文件 11.psd， 使 用 同样 的 操作 方法 ， 把 图 像 复 制 到 背景 中 。 为 了 让 复制 的 画 轴 表 现 出 立体 的 视 党 效果 ,执行 “图 
层 > 图 层 样式 > 投影 ”菜单 命令 ,打开 “图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 根据 画面 需要 设置 “投影 ”选项 ， 设 置 后 单 击 “ 确 
定 ” 按 钮 ， 应 用 样式 。 


混合 模式 : | 正常 :| 国 国 


不 透明 度 (0): ES |73 |% 
角度 (A}: | | [132 | 度 口 


(DD 二 
扩展 (R): 蕊 
大 小 (5): < 


步骤 03 用 “色相 /饱和 度 ” 调 整 颜色 


为 了 增强 画面 的 复古 感 ， 可 以 对 颜色 进行 调整 。 按 住 Ctrl 键 不 放 ， 单 击 “ 画 轴 ” 图 层 缩 抠 图 ， 载 入 选区 。 新 建 “色相 /饱和 
度 1” 调 整 图 层 ， 打开“ 属性 ”面板 ， 在 面板 中 单 击 并 向 左 拖 忠 “饱和 度 ” 交 块 ， 降 低 画 轴 图 像 的 颜色 饱和 度 。 
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步骤 04 ”根据 “色彩 范围 ”调整 图 像 


打开 素材 文件 12.Jjpg， 这 里 只 需要 使 用 画面 中 的 建筑 主体 ， 因 此 执行 “选择 > 色彩 范围 ”菜单 命令 , 打开 “色彩 范围 ”对 话 
框 ， 在 对 话 框 中 用 吸管 工具 在 天 空 部 分 单 击 ， 设 置 选 择 范 围 。 


选择 人 C): | 2 取样 颜色 
检测 人 了 恰 ID) [本 地 化 茂 色 该 亿 ) 
凑 色 罕 差 [FP): 38 


范围 (R 


”加 选择 范围 (E) 


步骤 05 创建 选区 


为 了 选择 整个 天 空 部 分 ， 表 单 击 “ 添 加 到 取样 ”按钮 ， 继 续 在 左 侧 预 宽 图 像 中 的 天 空位 置 连续 单 击 ， 调 整 选择 学 围 ， 直 到 | 整 
个 天 空 区 域 都 变 成 日 色 ， 蛙 击 “确定 ”按钮 ， 创 建 选区 ， 选 中 蓝 色 的 天 空 图 像 。 


奢 择 人 C); | 到 取样 商 色 


榨 贡 作 腔 (D】 站 本 地 北 颜 色谱 惨 ) 
产 色 雁 盖 {F): |38 


加 ) 选择 范围 (E) ”中 ) 图 像 (M) 


步骤 06 执行 “反选 ”命令 选择 图 像 


由 于 需要 选择 的 对 象 为 建筑 ， 所 以 按 下 快捷 键 Shift+ Ctrl+1， 或 者 执行 “选择 > 反选 ”菜单 命令 ， 反 选 选区 ， 选 择 图 像 中 的 


建筑 部 分 


步骤 07 复制 图 像 添 加 蒙 版 


单 击 工具 箱 中 的 “移动 工具 ”按钮 ， 把 选区 内 的 建筑 图 像 拖 蝶 至 画 轴 左 下 角 位 置 ， 命 名 为 “建筑 ”图 层 。 按 下 快捷 键 


ctrl+T， 打 开 目 由 变换 编辑 框 ， 调 整 建筑 的 大 小 和 位 置 ， 再 单 击 “ 添 加 图 层 蒙 版 ”按钮 ， 选 择 “画笔 工具 ”， 设 置 前 景色 为 黑 
色 ， 涂 抹 图 像 ， 将 多 余 的 建筑 图 像 隐藏 起 来 。 


步骤 08 载 入 选区 调整 “ 黑 日 ”效果 


画面 中 添加 的 建筑 图 像 颜色 与 图 像 的 整体 风格 不 搭 ， 还 需要 进行 颜色 的 调整 。 按 住 Ctrl 键 不 放 ， 单 击 “ 调 整 ”面板 中 的 “ 黑 
日 ”按钮 ,创建 “ 黑 晶 1” 调整 图 层 , 打开 “属性 ”面板 ， 勾 选 “ 色 调 ” 复 选 框 ,设置 为 与 背景 相近 的 颜色 ， 使 画面 的 颜色 更 加 
统一 


pr 1 


步骤 09 复制 图 像 设 置 对 称 的 画面 


按 住 Ctrl 键 不 放 ， 单 击 “ 建 筑 。 和 “黑白 1” 图 层 ， 将 这 两 个 图 层 拖 蝶 至 “创建 新 图 层 ” 按 钮 ， 复 制图 层 ， 得 到 “建筑 找 
贝 ”和 “黑白 1 拷贝 ”图 层 。 执 行 “ 编 辑 > 变换 > 水 平 翻转 ”菜单 命令 ， 翻 转 图像 ， 将 建筑 移 人 至 男 轴 的 另 一 侧 ， 结 合 “ 画 笔 工 
具 " 蒙 版 应 用 沁 围 。 


中 ~ 黑白 1 拷 风 
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步骤 10 ”调整 不 透明 度 


观察 图 像 友 现 添 加 的 建筑 图 像 太 抢眼 了 ， 因 此 同时 选中 “建筑 ”及 其 上 方 的 所 有 图 层 ， 将 选中 的 多 个 图 层 的 “不 透明 度 ”i 
置 为 30%。 


* 不 通明 厦 : 30% 
中 而 填充: 100% 
9 了 吕 背景 图 像 
人 .黑白 1 拷 风 


en eer 建筑 拷 风 
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步骤 11 打开 图 像 调 整 “ 色 彩 学 围 " 


打开 素材 文件 13.jjpg， 这 里 只 需要 使 用 画面 中 的 树木 部 分 ,执行 “选择 > 色彩 范围 ”菜单 命令 , 打开 “色彩 学 围 ” 对 话 框 ， 
在 对 话 框 中 用 吸管 工具 在 画面 中 间 的 树木 位 置 单 击 ， 并 勾 选 “ 反 相 ” 复 选 枉 ， 设 置 选择 学 围 。 
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步骤 12 根据 “色彩 范围 ”选择 并 抠 取 图 像 


设置 完成 后 单 击 “确定 ”按钮 ， 返 回 图 像 窗口 ， 根 据 设置 的 选择 汽 围 创建 选区 ， 选 择 图 像 ， 按 下 快捷 键 Ctrl+J， 复 制 选区 内 
的 图 像 ， 抠 出 树木 区 域 。 


步骤 13 ”复制 图 像 


为 了 让 拭 出 的 图 像 更 为 干净 ， 选 择 “ 橡 皮 擦 工具 ”， 把 树木 旁边 多 余 的 图 像 擦 除 ， 然 后 使 用 “移动 工具 ”把 抠 出 的 树木 图 像 
拖 蝶 至 画 轴 中 | 间 位 置 ， 按 下 快捷 键 Ctrl+T， 打 开 上 自由 变换 编辑 框 ， 将 树木 调整 至 合适 大 小 。 


反 巧 提示 : 用 荣 早 打开 目 由 变换 编辑 杠 


果 要 对 图 像 的 大 小 进行 调整 ， 除 了 可 以 按 下 快捷 键 Ctdl+ 工 ， 打 开 自 由 变换 编辑 框 外 ， 也 可 以 执行 “编辑 > 自由 变 挽 ”菜单 


令 ， 打 开 该 编辑 框 。 
步骤 14 调整 图 像 的 不 透明 度 


为 了 使 树木 融入 到 男 轴 中 ， 选 择 “ 树 木 ” 图 层 ， 将 此 图 层 的 “不 透明 度 ” 设 置 为 10%， 降 低 不 透明 度 。 单 击 “ 添 加 图 层 蒙 
版 ”按钮 ， 为 此 图 层 添 加 莹 版 ， 选 择 “画笔 工具 ”， 设 置 前 景色 为 黑色 ， 在 树木 边 绿 涂抹 ， 隐 藏 多 余 的 图 像 。 


= 不 委 明 讼 : 10e 
A 由 六 填充 : 100% 
@ 了 品 背 景 图 像 
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步骤 1? 创建 “黑白 ”调整 图 层 


的 
外 
问 
4 
洁 
丰 


经 过 上 一 步 操 作 ， 虽 然 图 像 与 背景 结合 得 已 经 不 错 了 ， 但 是 为 了 让 画面 色调 更 加 统一 ，j 
键 不 放 ， 单 击 “ 树 木 ” 图 层 编 虎 图 ， 载 入 选区 。 新 建 “ 黑 日 2” 调 整 图 层 ， 勾 选 “ 色 调 ” 复 i 


透明 度 ” 降 人 至 55%。 


EE 


进行 调整 。 按 住 Ctrl 
框 ， 设 置 颜 色 ， 设 置 后 把 图 层 “ 不 


不 委 明 度 : 55% 


中 本 填充: 100% 


人 mL 里 白 > 


步骤 16 设置 “曲线 ” 提 亮 图 像 


继续 使 用 同样 的 方法 ， 同 画面 添加 更 多 的 素材 ， 为 了 让 顾客 的 视线 更 集中 ， 可 以 对 中 间 部 分 的 画 轴 进 行 提 亮 。 按 住 Ctrl 键 不 
放 ， 单 击 “ 画 轴 ” 图 层 缩 唤 图， 载 入 选区 。 新 建 “ 曲 线 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 单 击 并 向 上 拖 昂 曲线 。 


步骤 17 创建 弄 贴 蒙 版 拼合 图 像 


为 了 确定 所 有 添加 的 图 像 都 位 于 画 轴 和 内， 同时 选中 “ 画 轴 ”图 层 上 的 所 有 图 层 ， 执 行 “ 图 层 > 创建 筋 贴花 版 ”菜单 命令 ， 创 
建 剪 贴 蒙 版 ， 将 超出 画 轴 部 分 的 建筑 、 树 木 等 图 像 隐藏 。 
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步骤 18 使 用 “ 横 排 文字 工具 ”添加 文字 


打开 素材 文件 02.psd， 将 其 复制 到 男 轴 左上 角 位 置 ， 然 后 选择 “ 横 排 文字 工具 ”， 在 旺旺 头像 旁边 输入 文字 “客服 中 
心 。 和 英文 “SERVICE CENTER” 。 


步骤 19 ”绘制 图 形 添加 更 多 文字 


由 于 此 店铺 中 的 客服 分 为 售 前 客服 和 售后 客服 ， 所 以 需要 分 开 进 行 设计 。 移 创建 “ 
G108、B78,， 使 用 “矩形 工具 ”绘制 矩形 ， 并 用 “ 横 排 文字 工具 ”在 矩形 上 输入 文字 - 


”图 层 组 ， 设 置 前 景色 为 R174、 
前 组 ”。 


下 


步骤 20 ”使 用 “ 圆 角 矩形 工具 ”绘制 图 形 


选择 “ 圆 角 算 形 工具 ”， 设置 “半径 ”为 3 像素 ， 在 画面 中 单 击 并 拖 蝶 鼠标 ， 绘 制 一 个 黑色 的 算 形 。 为 了 让 绘制 的 图 形 更 有 
感 ， 


层次 感 ， 复 制图 层 ， 将 图 形 填 殉 颜 色 设置 为 日 色 。 


3 像 论 国 对 区 芭 绎 


步骤 21 设置 图 层 样 式 


由 于 这 里 制作 的 是 客服 按钮 ， 为 了 增强 按钮 的 质感 ， 执 行 “图 层 > 图 层 样式 > 和 斜面 和 浮 膨 ” 菜 单 命令 ,打开 “图 层 样式 ”对 
话 框 ， 在 对 话 框 中 勾 选 “斜面 和 浮雕 ”样式 ， 设 置 选项 ， 再 勾 选 “渐变 于 加 ”和 “ 搞 边 ”样式 ， 设 置 选项 。 
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步骤 22 ”复制 并 添加 旺旺 图 像 


设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 应 用 样式 ， 得 到 更 加 立体 的 按钮 效果 。 选 择 “ 横 排 文 字 工具 ”， 在 按钮 上 输入 文字 “和 我 联 
系 ”， 并 添加 旺旺 图 标 。 


步骤 23 ”完成 更 多 客服 图 标的 设计 


由 于 店铺 中 的 客服 有 很 多 个 ， 所 以 复制 客服 按钮 ， 然 后 分 别 调整 位 置 ， 得 到 整齐 排列 的 按钮 效果 。 继 续 使 用 同样 的 方法 ， 进 
行 售后 组 的 设置 ， 完 成 本 实例 的 操作 。 


实例 126 ”传统 的 侧 边 栏 客服 区 设计 


本 实例 是 为 某 店 铺 的 侧 边 栏 设计 的 客服 区 ， 由 于 侧 边 栏 的 尺寸 大 小 有 限 ， 因 此 在 设计 时 会 有 很 多 限制 ， 只 能 通过 简单 的 图 案 
加 以 修饰 
预约 电话 ES QQ 咨询 “高端 私人 定制 
15000001172 | 

在 线 H 癌 : 8 : 00-22 : 00 6 在 线 咨询 

4 微 信 咨询 

(在 线 时 间 
8:00-21:00 


(预定 热线 
15000001172 


预定 电话 本 


回 到 项 部 * 


PRArK TOTHF TOP 


国 :- 
随 书 资源 \ 素 材 \15\14.psd 
随 书 资源 \ 源 文件 \15\ 传 统 的 侧 边栏 客服 区 设计 .psd 


了 横向 的 分 隔 ， 使 其 产生 一 定 的 层次 感 。 


设计 分 析 
` 设计 要 点 01: 由 于 侧 边 栏 的 尺寸 有 限 ， 在 设计 时 对 画面 进 
省 ， 点 组 整个 图 像 。 


` 设计 要 点 02: 设计 的 过 程 中 ， 为 了 体现 客服 区 的 末 切 感 和 实用 性 ， 在 画面 中 添加 了 一 些小 图 形 


设计 要 点 03: 为 了 使 画面 中 的 客服 图 像 更 加 突出 ， 根 据 店铺 的 整体 装修 风格 ， 在 设计 中 使 用 了 明度 较 强 的 红色 、 和 白色 来 表 
现 。 
版 式 分 析 
本 实例 使 用 了 横向 分 隔 的 方式 来 对 侧 边栏 的 客服 区 进行 布局 ， 方 便 顾 客 直观 地 找到 需要 的 内 容 ， 同 时 这 样 的 布局 安排 也 让 男 
面 显 得 更 为 工整 ， 提 高 了 操作 的 实用 性 。 


本 实例 的 配色 主要 根据 店铺 的 整体 委 修 风格 来 展开 ， 为 了 迎合 “高 端 定 制 ” 这 一 主题 ， 画 面 中 主要 运用 蜡 红 色 作 为 主要 配 
色 ， 通 过 加 入 日 色 或 黑色 来 调和 红色 所 市 来 的 视 党 冲 击 力 ， 让 画面 的 色彩 达到 更 为 和 谐 的 状态 


配色 方案 


技术 要 扣 


. 使 用 “ 撼 形 工具 ”绘制 并 定义 客服 区 外 形 ， 使 用 “ 圆 角 矩形 工具 ”进行 客服 区 的 细致 划分 ， 通 过 添加 样式 赋予 图 形 立 体 


涡 
(©) 


. 使 用 “ 横 排 文字 工具 ”在 画面 中 添加 所 需要 的 客服 信息 ， 并 结合 “字符 ”面板 设置 文字 属性 ， 突 出 文字 间 的 层级 关系 。 


` 运用 “钢笔 工具 绘制 客服 图 标 ， 把 店铺 所 对 应 的 二 维 码 图 像 复制 到 相应 的 位 置 。 


实例 127 素雅 风格 的 客服 区 设计 


本 实例 是 为 某 服 六 店 设 计 的 客服 区 ， 为 了 营造 一 种 舒适 、 目 然 的 氛围 ， 画 面 用 浅黄 色 作 为 主 色 ， 使 整个 画面 呈现 出 素雅 、 怀 
旧 的 感 听 ， 从 而 拉 近 了 顾客 与 店铺 之 间 的 距离 ， 在 文字 的 处 理 上 ， 用 统一 规整 的 黑体 来 表现 ， 给 人 专业 的 品质 感 。 


回 到 那 让 追忆 利 刹那 芒 华 ” 策 光 弓 六 


REFULLYSETETED 
| ; .ose i 3 


电 丽 全 束缚 现 贡 的 服务 ， 我 们 一 直 在 努力 ! 


6 和 : 人 前 服务 《和 : 咨询 小 G。 傅 : 咨询 HH 傅 : 关 询 川 ” 傅 : 咨询 小 客服 在 线 时 间 
周一 ~ 周 四 ( 早 9:00~ 晚 21:00 ) 
入 :人 告 5 县 务 @ : 洛 询 )F ”名 :咨询 小 角 : 雁 询 小 U 名 :咨询 小 P 周 五 ~ 周 日 ( 里 8:30~ 晚 23:00 ) 
A 区 | 关注 掌柜 说 > ”签到 送礼 > 
素 材 随 书 资源 素材 \15\02 psd，15、 16jpg 更 快 知道 优惠 更 快速 和 到 


源 文 件 随 书 资源 \ 源 文件 \15\ 素 雅 风格 的 客服 区 设计 .psd 


设计 分 析 
设计 要 点 01: 咖啡 给 人 的 感觉 是 生活 品质 的 象征 ， 寓 意 着 悠闲 、 轻 松 ， 在 设计 客服 区 标题 时 ， 选 择 咖 啡 素材 与 店铺 中 的 商 
品 风格 更 为 统一 ， 和 营造 出 一 种 恤 意 、 舒 适 的 氛围 ， 让 顾客 感 党 亲切、 自然 。 


. 设计 要 点 02: 为 了 提升 整个 设计 图 像 信 息 的 层次 ， 在 设计 时 使 用 了 渐变 色 对 背景 进行 填充 


设计 要 点 03: 为 了 将 众多 的 信息 清晰 地 展现 在 顾客 面前 ， 使 用 修饰 图 形 、 线 条 将 各 个 功能 区 域 进行 自然 地 分 隔 。 


版 式 分 析 


本 实例 中 国 面 横向 分 为 3 个 区 域 ， 在 各 个 区 域 中 又 进行 了 合理 分 隔 ， 显 得 错落 有 致 ， 让 人 感 吕 在 统一 中 产生 了 细微 的 变化 ， 
整个 布局 显得 非常 目 然 、 灵 活 ， 有 利于 信息 的 表现 和 传递 。 


配色 方案 


本 实例 在 配色 时 ， 为 了 营造 您 内 、 轻 松 、 和 舒适 的 氛围 ， 使 用 大 面积 的 淡 黄 色 构 成 了 画面 的 主 色 调 ， 同一 色相 中 颜色 的 明 
度 与 纯度 变化 来 塑造 单纯 、 统 一 的 画面 效果 ， 与 画面 主题 衔接 更 加 自然 。 


技术 要 点 
使 用 “矩形 工具 ”在 画面 中 绘制 不 同 大 小 的 矩形 ， 对 图 像 进 行 分 区 。 


“ 把 旺旺 图 标 添加 到 绘制 的 矩形 中 ， 并 根据 客服 信息 ， 使 用 “ 横 排 文 字 工 具 ” 输 入 对 应 的 文字 内 容 。 


. 添加 咖啡 、 光 尝 背 景 至 标题 区 域 ， 创 建 前 贴 莹 版 ， 拼 合 图 像 。 


实例 128 ”规则 整齐 的 客服 区 设计 


本 实例 是 为 淘 军 店 设计 的 客服 区 ， 在 设计 过 程 中 利用 窍 形 对 主要 客服 信息 进行 分 组 和 布局 ， 提 升 客服 的 可 信 度 和 专业 度 ， 同 
时 在 每 组 信息 中 都 提取 一 个 中 心 点 ， 便 于 消费 者 擎 握 更 多 的 客服 内 容 ， 增 强 了 图 像 的 表现 力 。 


人 100% 正 品 保证 x _ 好 评 一 律 过 一 律 运 现 


人 A、 


< Talk to me! 


素 材 随 书 资源 \ 素 材 \15\02.psd 
源 文 件 随 书 资源 \ 源 文件 \15\ 规 则 整齐 的 客服 区 设计 .psd 


设计 分 析 
. 设计 要 点 01: 利用 给 形 对 整个 设计 图 中 的 分 组 信息 进行 布局 ， 给 人 工整 、 严 谨 的 感受 ， 显 得 更 为 专业 。 
` 设计 要 点 02: 在 每 组 文字 信息 中 都 设置 了 一 个 中 心 点 ， 利 用 不 同 的 颜色 将 其 突显 出 来 ， 加 深 印 象 ， 便 于 阅读 和 记忆 。 
` 设计 要 点 03: 设计 图 中 的 信息 较为 丰富 ， 为 了 突出 其 重点 和 强调 主 次 关系 ， 利 用 了 不 同 的 颜色 和 字号 来 表现 。 

版 式 分 析 


本 实例 在 布局 中 将 画面 纵向 分 为 了 两 个 区 域 ， 并 对 各 个 区 域 做 更 进一步 的 分 隔 ， 将 要 表现 的 重要 信息 进行 分 组 归 类 ， 使 要 表 
现 的 主要 信息 得 以 清晰 地 表现 出 来 ， 便 于 顾客 查看 和 阅读 。 


配色 方案 


由 于 整个 版 面 中 的 信息 较 多 ， 选 用 了 纯色 的 背景 来 表现 ， 让 信息 显得 更 加 集中 。 为 了 提高 顾客 的 信任 感 和 信赖 感 ， 


的 背景 中 加 入 颜色 更 深 的 蓝 色 加 以 修饰 ， 画 面 显得 更 加 协调 而 有 张力 。 


技术 要 扣 


` 使 用 “图 案 肥 加 ”“ 颜 色 爱 加 等 修饰 图 像 中 的 设计 元 素 。 


利用 “ 横 排 文字 工具 ”在 画面 中 添加 说 明文 字 ， 并 通过 “字符 面板 设置 文字 的 属性 。 


在 青 灰 色 


通过 “ 短 形 工具 绘制 图 形 ， 突 出 画面 中 的 部 分 文字 内 容 ; 利用 “ 魔 棒 工具 创建 选区 ， 并 对 选区 进行 颜色 的 更 改 与 调 


实例 129 ”站 色调 风格 的 客服 区 设计 


本 实例 是 为 某 店 铺设 计 的 客服 区 ， 把 较为 理性 的 赣 色 作为 主 色调 ， 表 现 客服 的 专业 和 诚 尽 ， 修 饰 元 素 上 米 用 了 展示 局 部 耳麦 
的 方式 进行 辅助 表现 ， 用 客服 的 办 公 工 具 来 突显 客服 的 形象 ， 并 通过 整齐 的 文字 和 旺旺 头像 排 惠 营造 出 一 种 视 党 上 的 工整 感 。 


A 


4 客服 中 心 
CUSTOMER 


SERVICE CENTER 营销 售后 售后 在 线 时 间 :9:00-18:00 
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在 线 时 | 日 :9:00 一 24:00 CONTACT US WILL BRING YOU SURPRISE YO 
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ra 


素 材 随 书 资源 \ 素 材 \15\02.psd，17.jpg，18.psd 
源 文 件 随 书 资源 \ 源 文件 \15\ 单 色调 风格 的 客服 区 设计 .psd 


设计 分 析 
. 设计 要 点 01: 在 本 实例 的 设计 中 ， 用 耳麦 作为 主要 的 表现 对 和 象 ， 直 观 地 传递 出 该 区 域 的 功能 和 作用 。 
-设计 要 点 02: 整个 画面 通过 统一 的 蓝 色 调 来 提升 可 信赖 感 ， 有 助 于 店铺 客服 形象 的 提升 。 
: 设计 要 点 03: 在 每 个 客服 旁边 都 添加 了 文字 ， 顾 客 可 以 根据 文字 选择 客服 进行 咨询 。 

版 式 分 析 


本 实例 利用 耳麦 将 画面 自然 地 分 隔 为 左 、 右 两 个 部 分 ， 左 侧 用 于 放置 客服 主体 文字 、 客 服 在 线 时 间 等 信息 ， 右 侧 放 置 客 服 
区 ， 并 企 其 下 方 添加 品质 保证 、 商 品 售后 等 信息 ， 增 强 顾客 的 信任 感 。 


配色 方案 


监 色 代表 了 理性 、 冷 静 和 沉稳 ， 在 本 实例 中 主要 使 用 了 蓝 色 调 进 行 配 色 ， 给 人 以 强烈 的 信赖 感 ， 提 升 了 客服 的 形象 ， 让 顾客 
能 够 对 客服 产生 信任 。 


技术 要 扣 


` 将 夜 录 图 像 17.jpg 复 制 到 新 建文 件 中 ， 更 改 混合 模式 和 不 透明 度 ， 拼 合 图 像 ， 再 通过 复制 操作 把 耳麦 图 像 18.psd 置 于 画面 
左 侧 。 


. 使 用 “ 横 排 文字 工具 ”在 画面 中 输入 客服 名 称 及 客服 信息 ， 并 在 这 边 添加 旺旺 图 标 。 


` 使 用 “ 拢 形 工 具 ” 绘制 灰色 矩形 ， 然 后 用 “钢笔 工具 ”在 图 形 中 完成 标识 图 人 案 的 绘制 。 


第 16 章 ”网 店 委 修 的 纪 合 应 用 


维 名 利 亚 态 夏 新 品 发 布 
pe" 【品牌 】 VICTORIA 维多利亚 


【面料 】 韩国 进口 高 级 水 晶 砂 
法 国 重 磅 车 骨 花 著 丝 


【颜色 】 象牙 白 
【版 型 】 紧身 EPEE3 适中 
【后 背 】 绑 带 吃 背 


夏 日 清香 


提前 履 藏 7 加 入 购物 车 


【 胸 型 】 吊带 医 EE 到 拦 脖 
【厚薄 】 超 萍 ” 稍 厚 节 3E 
【款式 】 鱼 尾 ” 竹 落 袜 


产品 材质 : 合金 塑料 电子 元 件 
玩具 类 型 : 车 模 
车 身 电池 : 纽扣 电池 【A613/LR44】 
”适用 年 龄 : 2 岁 以 上 
产品 用 途 : 儿童 玩具 

家 居 摆 设 送礼 局 赚 


一 二 


网 店 的 六 收效 果 会 影响 顾客 对 店铺 的 整体 印象 ， 它 是 一 个 店铺 的 门面 。 网 店 装修 包含 的 内 容 较 多 ， 如 店 招 、 导 航 、 欢 迎 模 
块 、 促 销 广 告 、 细 节 描 述 及 客服 区 等 ， 如 何 将 这 些 元 素 合理 有 序 地 安排 在 一 个 页 面 中 ， 是 非常 值得 设计 者 思考 的 。 如 果 店 铺 中 的 
元 素 处 理 得 不 合理 ， 束 无 法 将 信息 准确 地 传达 出 来 ， 会 让 顾客 不 知道 店铺 主要 销售 的 商品 是 什么 、 有 什么 作用 等 。 本 章 将 通过 3 
个 典型 的 实例 讲解 网 店 北 修 的 综合 应 用 。 


130” 服 委 类 店铺 委 修 设计 
131 ”儿童 玩具 店 妆 修 设计 


132 ”化妆 品类 店铺 装修 设计 


实例 130 ”服装 类 店铺 装修 设计 


本 实例 是 为 某 品牌 婚纱 所 设计 的 详情 页 ， 以 突出 品牌 形象 、 呈 现 商 品 价值 为 设计 理念 ， 设 计 中 通过 对 商品 整体 的 描述 、 品 牌 
徽标 的 突出 、 品 牌 故 事 的 传达 、 细 节 部 分 的 展示 ， 以 及 处 处 为 顾客 着 想 的 周到 服务 ， 让 顾客 感受 到 商品 的 价值 。 


随 书 资源 \ 素 材 \16\01.jpg 一 05.jpg，06.psd，07.jpg 一 10.jpg 


随 书 资源 \ 源 文件 \16\ 服 装 类 店铺 装修 设计 .psd 


版 式 分 析 


在 版 式 的 设计 上 ， 通 过 标题 栏 对 商品 进行 细致 的 展示 与 分 析 ， 不 仅 思 路 清晰 ， 而 且 简 单 明 了 ， 顾 客 能 够 清楚 地 看 到 各 区 域 要 
传递 的 相关 商品 信息 ， 整 个 版 式 显 得 更 有 条 理 ， 在 侧 边 栏 部 分 ， 通 过 竖 向 排列 的 布局 安排 ， 使 商品 的 查找 变 得 更 容易 ， 让 顾客 能 
够 轻松 找到 满意 的 商品 。 


步骤 01 “在 新 建文 件 中 添加 素材 图 片 


启动 Photoshop 程 序 ， 由 于 网 店 中 详情 页 的 宽度 限制 为 750 像 素 或 950 像 素 ， 所 以 新 建 空 白文 件 ， 尺 寸 设 置 为 950 像 素 
x5482 像 素 ， 分 辩 率 设置 为 标准 网 页 分 辨 率 72ppi。 打 开 素 材 文件 01.jpg， 将 素材 图 片 拖 入 新 建文 件 中 。 


离 度 (D): [950 


本 


一 高 度 (G): [5482 | 
分 状 率 (R): |72 


步 又 02 ”创建 勇 贴 芝 做 


因为 详情 页 的 内 容 很 多 ， 划 分 不 同 的 图 层 组 会 更 方便 管理 ， 所 以 单 击 “ 创 建新 组 ”按钮 国 ， 将 新 建 图 层 组 命名 为 “促销 广 
告 ”， 将 素材 图 片 拖 入 组 中 。 根 据 图 片 大 小 ， 单 击 “ 矩 形 工具 ”按钮 国 ， 在 画面 适当 的 位 置 创建 一 个 矩形 图 形 ， 得 到 “矩形 
1” 图 层 。 在 “图 层 1” 上 曲 击 鼠标 石 键 ， 选 择 “创建 勇 贴 芝 啤 ”， 得 到 所 需 图 片 。 


TU 
不 透明 讶 : 100% 


填 齐 : 1003% ” 
OO YB 性 和 广 各 
9 | 图 层 1 
Li 


rr 一 二 上- 一 
| 


步骤 03 使用“ 横 排 文字 工具 ”输入 文字 


为 了 使 画面 色调 更 为 统一 ， 在 画面 中 运用 “ 模 排 文字 工具 ”输入 颜色 与 图 片 色调 类 似 的 蓝 色 文字 ， 同 时 为 了 突出 部 分 文字 信 
息 ， 再 将 文字 “ 夏 日 清香 ” 改 为 红色 。 


步骤 04 ”添加 更 多 文字 


为 了 使 顾客 了 解 更 多 的 商品 促销 信息 ， 使 用 “ 横 排 文字 工具 ”继续 在 画面 中 输入 更 多 文字 信息 ， 并 根据 版 面 要 求 对 输入 的 文 
字 属 性 进行 调整 。 


维多利亚 初 夏 新 品 发 布 
A 


提前 收藏 /加 入 购物 车 


步骤 05 添加 形状 图 形 溢 饰 文字 


因为 只 有 文字 会 显得 很 单调 ， 所 以 新 建 图 层 ,， 使 用 “直线 工具 ”与 “椭圆 工具 ”绘制 形状 ， 绘 制 完 成 后 ， 生 成 “形状 
1” 与 “ 椭 加 1” 图 层 。 将 这 两 个 图 层 分 别 复制 两 次 ， 按 下 快捷 键 Ctrl+T， 目 由 调整 复制 的 图 形 的 大 小 和 位 置 ， 使 图 形 起 到 更 好 
的 委 饰 作用 ， 调 整 完成 后 按 Enter 键 。 


步骤 06 ”使 用 “矩形 工具 ”添加 更 多 形状 图 形 


此 短 婚 纱 为 扁 级 定制 服 丢 ， 为 了 突出 这 一 特点 ， 在 文字 “ 马 冰 手 工 制 作 ” 下 添加 清新 靓丽 的 绿色 矩形。 单 击 “ 窍 形 工具 ” 按 


钮 国 ， 绘 制 矩形 图 形 ， 生 成 “矩形 2” 图 层 。 使 用 “ 横 排 文字 工具 ” ， 在 和 矩形 图 形 上 单 击 并 输入 文字 信息 ， 在 “字符 ”面板 中 调 


整 各 项 参数 。 


\ 


子 何 


习 体 Regular 


人 14 所 
va o 


步 又 07 ”使 用 “ 栅 格 化 图 层 ” 得 到 缺 角 效果 


为 了 使 字体 更 有 创意， 可 以 运用 文字 缺 角 效 果 ， 而 栅 格 化 的 文字 图 层 才能 删除 文字 局 部 。 所 以 右 击 文字 图 层 ， 选 择 “ 栅 格 化 
图 层 ”， 然 后 删除 文字 局 部 。 单 击 “ 钢 笔 工具 ”按钮 较 ， 把 不 要 的 文字 部 分 圈 出 ， 单 击 鼠 标 右键 ， 选 择 “ 建 立 选区 ”， 按 
Delete 键 删除 选区 内 容 ， 得 到 字母 缺 角 效果 ， 然 后 使 用 上 述 方法 委 饰 其 他 文字 。 


步骤 08 使 用 “图 层 样 式 ” 妆 饰 文字 


双击 英文 文字 图 层 ， 人 在 打开 的 “图 层 样 式 ” 对 语 框 中 勾 选 “图 案 赤 加 ” 复 选 框 ， 为 文字 添加 图 和 案 ， 调 整 好 各 项 参数 。 委 饰 后 


渴 全 模 式 : | 


步骤 09 ”继续 添加 “图 层 样式 " 


因为 要 更 加 突显 “ 夏 日 清理 ”这 个 重要 的 主题 ， 所 以 双击 “ 夏 日 清香 ”文字 图 层 ， 在 弹出 的 “图 层 样 式 ” 对 话 框 中 勾 选 “图 
案 去 加 ”与 “投影 ” 复 选 框 ， 并 在 相应 的 选项 组 中 进行 设置 。 


T 通 明度 (0: 一 |75 |% 
角度 (A): Sm 86 “| 度 [Vi 使 用 全 局 光 (6) 
扩展 (RY CE 人 
大 | 下 一 像素 


俊 怠 利 亚 各 矶 新品 发 布 


~ 


mr ED. 本 

后 工 间 放 

日 清香 a 
提前 半藏 7 和 失 酮 甸 丰 


步骤 10 新建“ 品牌 名 片 ”图 层 组 


新 建 “ 品 牌 名 片 ”图 层 组 ， 由 于 每 个 板块 的 标题 相似 ， 所 以 在 “品牌 名 片 ”图 层 组 中 再 新 建 “标题 ”图 层 组 ， 方 便 后 面板 块 
使 用 ,使 用 “ 横 排 文字 工具 ”在 标题 左边 单 击 并 输入 所 需 文字 。 


步骤 11 纵 制 形状 图 形 


分 别 使 用 “直线 工具 ” “ 目 定 形状 工具 ”与 “起 形 工具 ”在 画面 合适 位 置 绘制 图 形 ， 使 标题 栏 更 加 美观 。 


维 吕 利 亚 


HH 大寺 


步骤 12 ”添加 素材 图 片 


选择 “和 窍 形 工具 ”， 设 置 前 景色 为 R229、Q229、B229， 在 标题 下 绘制 一 个 矩形 图 形 ， 作 为 品牌 名 片 的 背景 ; 在 品牌 名 片 
添加 商品 素材 ， 可 以 使 顾客 直观 地 看 到 商品 与 参数 值 的 对 比 。 打 开 素 材 文 件 02jpg， 将 图 片 抱 至 文件 “品牌 名 片 ” 育 景 图 层 


步骤 13 创建 “色相 /饱和 度 ” 调 整 色调 


由 于 素材 图 片 与 宣传 页 色调 一 臻 会 使 画面 更 美观 ， 所 以 单 击 “ 调 整 ”面板 中 的 “色相 /饱和 度 ” 按 钮 图 ， 设 置 “色相 ”为 


+5， 使 素材 图 片 偏向 黄 绿色 ， 设 置 “ 饱 和 度 ” 为 -8， 使 画面 黄 绿 的 鲜艳 程度 趋 于 自然 ; 完成 后 双击 素材 图 层 ， 在 打开 的 “图 层 
样式 ”对 话 框 中 勾 选 “投影 ” 复 选 框 ， 并 设置 好 各 项 参数 。 


结构 


混 全 模式 : | 下 H 台 底 ?| | 
不 透明 度 (0): 全 % 


图 中 色相 /饱和 度 


角度 (A): ( 4 ) [B86 | 度 J 使 用 全 局 光 (6) 


扩展 (R): 人 % 


大 小 (Ss: 5 | | 全 过 


步骤 14 创建 “ 目 然 饱和 度 ” 调 整 伦 米色 彩 


由 于 扣 报 光线 原因 ， 论 米 颜 色 较 上 暗 ， 所 以 需要 提高 它 的 头 色 鲜艳 度 。 使 用 工具 箱 中 的 “磁性 套 达 工具 ”勾勒 出 伦 米 的 部 分 
并 适当 羽化 8 像素 。 新 建 “ 目 然 饱 和 度 1” 调 整 图 层 , 设置 “ 目 然 饱和 度 ” 为 +80， 设 置 后 可 以 看 到 伦 米 颜色 变 得 鲜艳 。 


步骤 15 ”添加 商品 文字 信息 


添加 了 商品 整体 展示 效果 ， 接 下 来 残 是 服 委 评 情 的 输入 。 使 用“ 模 排 文字 工 具 ”， 用 黑色 较 规 学 的 字体 ， 企 画面 右 侧 空 日 位 
置 单 击 ， 输 入 商品 信息 ， 并 使 用 日 色 标 出 符合 商品 条 件 的 信息 。 为 了 让 符合 条 件 的 信息 更 加 醒目 ， 使 用 “ 窍 形 工具 ”， 在 符合 条 
件 的 文字 下 方 绘制 不 同 颜色 的 起 形 图 形 。 


【品牌 】 VICTORIA 维多利亚 [品牌 】 VICTORIA 维多利亚 


【面料 】 韩国 进口 高 级 水 晶 砂 【面料 】 韩国 进口 高 级 水 晶 砂 
法 国 重 磅 车 肯 花 蔓 丝 法 国 重 磅 车 骨 花 蔓 丝 


【颜色 】 象 直 日 【颜色 】 象牙 白 


【版 型 】 ”紧身 适中 【版 型 】 紧身 适中 


【后 背 】 绑 带 “” 露 背 绑 带 ” 露 背 

【 胸 型 】 吊带 挂 肝 【 胸 型 】 吊带 车 洒 汉 挂 脖 

【厚薄 】 超 薄 稍 | 【厚薄 】 起落 ” 稍 厚 村 于 让 

[款式 】 鱼 尾 医 落 宰 【款式 】 鱼 尾 ” 莲 莲 禄 
洗涤 说 明 洗涤 说 明 


步骤 16 使 用 “ 李 圆 工具 ”绘制 圆 形 背 景 
衣服 因为 材质 不 同 ， 洗 涤 的 方法 也 不 同 ， 可 以 明确 标 出 洗 光 的 注意 事项 ， 提 醒 顾客 洗衣 时 需要 注意 的 问题 。 使 用 工具 箱 中 


的 “椭圆 工具 ”， 在 文字 “洗涤 说明 ”字样 的 下 方 绘制 图 形 ， 按 下 快捷 键 Ctrl+J， 复 制 多 个 形状 图 层 并 调整 其 位 置 ， 得 到 并 排 的 
图 形 效 果 。 打 开 素 材 文 件 06.psd， 把 衣服 洗涤 图 标 复制 到 对 应 的 圆 形 上 方 。 


洗涤 说 明 


温 声 提示 : 1. 请 不 要 使 用 漂白 剂 长 时 间 漫 泡 
2. 洗 后 请 调整 衣 往 上 蜡 二 


步骤 17 ”为 图 形 添加 文字 说明 


为 了 让 顾客 更 清楚 衣服 洗涤 时 的 注意 事项 ， 选 用 “ 横 排 文字 工具 ”在 图 形 芳 边 添加 对 应 的 文字 说 明 信 息 。 


先 汶 说 肯 


本 


直 河 亩 


示 + 二- 请 不 要 使 用 漂 
2. 洗 后 请 识 


步骤 18 新建“ 品牌 故事 ”图 层 组 


新 建 “ 品 牌 故事 ”图 层 组 ， 按 下 快捷 键 Ctrl+Jj， 复 制 “ 品 牌 名 片 ”下 的 “标题 ”图 层 组 ， 并 下 拉 人 至 “品牌 故事 ”图 层 组 下 。 
由 于 接 下 来 要 制作 的 是 “品牌 故事 ”， 所 以 选用 “ 横 排 文字 工具 ”修改 标题 文字 信息 


[ 品 转 】 VIGTORIA 诊 多 利 王 

【而 习 〗 转 国 进口 离别 林 量 可 
法 国 重 瞻 幸 骨 蔡 熏 三 

【县 色 】」 笋 小 刀 

[ 吓 和 型】 在 身 西亚 是 通 中 

[局 向】 是 各 ” 轿 背 

[ 珊 理 〗 忌 珊 性 瞬 

[ 厚薄】 嫩 曾 精 权 

【版式 ]】 鱼 尾 ” 曾 蕴 禄 

式 渴 调 归 


时 | Pe | | 
下 司 测 日 凤 昌 时 直 国平 


i | 
上 山 轴 二 调整 到 划 风 十 


步骤 19 ”使 用 “ 目 形 工具 ”绘制 背景 


使 用 “和 矩形 工具 ”在 标题 下 万 绘制 图 形 作为 品牌 故事 的 背景 ， 将 品牌 名 片 的 背景 颜色 作为 品牌 故事 的 背景 颜色 


口 口 


， 使 上 下 颜色 


协调 统一 。 


步骤 20 ”添加 品牌 徽标 


为 了 突出 品牌 文化 ， 需 要 添加 该 品牌 服 妆 的 品牌 微 标 图 形 。 在 添加 图 形 前 ， 选 用 “椭圆 工具 ”在 背景 元 侧 绘 制 一 个 小 圆 ， 用 
于 确定 徽标 的 大 小 ， 然 后 打开 素材 文件 07.jpg， 将 打开 的 徽标 图 形 置 于 椭圆 上 方 。 


6 
| 图 


| 噩 椭圆 3 


步骤 21 为 品牌 故事 添加 品牌 文化 信息 


为 了 让 微 标 图 形 置 于 椭圆 内 部 ， 青 按 下 快捷 键 Ctrl+Alt+G， 创建 草 贴 蒙 版 ， 将 超出 圆 以 外 的 图 形 隐 藏 ， 在 微 标 右 侧 的 留 日 
处 运用 “ 横 排 文字 工具 ”输入 品牌 文化 信息 。 


维多利亚 来 自 于 源 自 英国 ， 成 立 于 1933 年 ， 和 对 承 着 只 做 高 级 婚纱 的 理念 ， 


进入 了 婚纱 的 高 级 定制 领域 。1972 年 在 英国 开设 了 第 一 家 娩 纱 门店 ，80 年 
代 ， 进 入 整个 欧洲 市 场 ，90 年 代 进 入 北美 市 场 。 


维多利亚 推 案 婚 纱 浪 漫 极 简 主 风格， 旗下 拥有 多 名 顶级 设计 师 。 主 要 运 
用 的 立体 刺 绩 ， 羽 毛 ， 珠 片 竺 元素 也 使 婚纱 更 加 : ] 


步骤 22 绘制 矩形 突出 标题 文字 
由 于 标题 文字 的 背景 颜色 与 前 一 部 分 “品牌 名 片 ” 的 标题 背景 闫 色 过 于 接近 ， 这 里 为 了 突出 “吊牌 文化 ”， 选 用 “和 矩 形 工 
具 ” 在 “标题 拷贝 ”图 层 组 下 绘制 一 个 日 色 的 矩形 ， 突 出 标题 文字 信息 。 
维 骂 利 亚 
VICTORIA 


维多利亚 来 自 于 源 自 英国 ， 成 立 于 1933 年 ， 需 承 着 只 做 高 级 婚纱 的 理念 ， 
进入 了 婚纱 的 高 级 定制 领域 ，1972 年 在 英国 开设 了 第 一 家 始 冰 门店 ，90 年 
代 ， 进 入 整个 欧洲 市 场 ，90 年 代 进 入 北美 市 场 。 


维多利亚 推崇 婚纱 浪 湿 极 简 主 光 风 格 ， 旗 下 拥有 多 名 顶级 设计 师 。 主 要 运 
用 的 立 仁 刺 绩 ， 弹 毛 ， 球 片 等 元 素 也 使 婚纱 更 加 英 有 外 gy 


步骤 23 新建“ 模特 实 扣 ” 图 层 组 
在 详情 页 装修 过 程 中 ， 要 想 让 顾客 更 直观 地 感受 到 服 沪 效果， 可 以 添加 模特 上 身 效 果 展 示 图 。 创 建 “ 模 特 实 扣 ”图 层 组 ， 运 
用 与 步骤 18 相 同 的 操作 方法 ， 复 制 、 创 建 “ 标 题 ” 图 层 组 ， 并 运用 “ 横 排 文字 工具 ”更 改 标题 文字 。 


维多利亚 推举 赋 纱 亡 浊 极 简 主 义 风 格 ， 旗 下 搬 有 多 名 顶级 设计 师 。 主 要 运 
用 的 立体 刺 塌 ， 蚤 毛 ， 玛 片 等 元 票 也 使 婚 捷 画 加 美丽 内 进 ， 


上 挫 旬 利 亚 
YICTORIA 


步骤 24 使 用 “钢笔 工具 ”绘制 不 规则 图 形 


为 了 使 画面 的 细节 设计 更 出 彩 ， 可 以 在 模特 实 拍 图 上 添加 阴影 ， 做 出 纸 户 投影 的 效果 。 具 体 方法 为 新 建 图 层 ， 使 用 工具 箱 中 
的 “钢笔 工具 ”多 出 阴影 轮廓 ， 再 按 下 快捷 键 Ctrl+J， 建 立 选区 ， 选 择 “ 痕 变 工 具 ”， 在 选区 内 由 下 向 上 拖 擅 鼠标 ， 创 建 阴影 效 


步骤 25 ”添加 模特 素材 图 片 


接 下 来 需要 添加 模特 展示 效果 ， 选 择 “ 和 埠 形 工具 ”， 移 在 画面 中 绘制 一 个 矩形 ， 确 定 模特 展示 区 域 ， 然 后 打开 素材 文件 
03,jpg， 将 打开 的 素材 图 像 复制 到 起 形 上 方 ， 选 择 “矩形 选 框 工具 ”， 选 择 主体 婚纱 部 分 ， 添 加 图 层 共 版 ， 把 多 余 的 图 像 隐藏 起 


aa 


二 
二 -一 -一 -一 -二 一 -一 -一 一 一 一- 一 -一 -一 -1 
二 人 


步骤 26 ”使 用 “色彩 平衡 ”调整 颜色 


添加 模特 照 睛 后 ， 及 现 照 睛 颜色 黄 黄 的 ， 显 得 不 够 唯 芸 ， 因 此 需要 对 颜色 进行 修饰 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 8” 
层 ， 载 入 选区 。 新 建 “色彩 平衡 1 ”调整 图 层 ， 这 里 需要 表现 更 药 幻 的 色彩 效果 ， 所 以 在 “属性 ”面板 中 设置 参数 ， 加 深 青 色 和 


六 
四 


色 1 周 : ”阴影 
青色 
洋红 


内 加 人 和 平 有 
色 肝 :| 中间 
青色 


洋红 


创建 “曲线 1” 调 整 图 层 , 打开 “属性 ”面板 ， 为 了 让 画面 变 得 于 加 明亮 ， 在 面板 中 单 击 并 向 上 拖 外 曲线 ， 可 以 看 到 原来 友 


黄 的 照片 变 得 更 加 唯美 。 


目 定 


RGB 


为 了 让 顾客 能 多 方位 了 解 服 半 上 身 效 果 ， 打 开 素 材 文件 04jpg、05:jpg， 采 用 与 步骤 24 相 同 的 万 法 ， 将 更 多 婚纱 照 卢 添加 全 


婚纱 详情 页 面 中 ， 然 后 根据 画面 的 整体 风格 对 婚纱 照片 进行 颜色 的 调整 ， 统 一 画面 色调 。 


步骤 29 ”添加 店铺 徽标 


为 了 提升 店铺 的 品牌 力 ， 可 以 在 模特 图 片 左上 和 角 添 加 品牌 信息 。 创 建 “ 婚 纱 品牌 ”图 层 组 ,使 用 “ 横 排 文字 工具 ”在 最 上 面 
一 个 模特 图 像 的 左上 角 位 置 输入 婚纱 品牌 名 称 ， 输 入 后 按 下 快捷 键 Ctrl+J， 复 制图 层 组 中 的 文字 ， 将 其 移 到 另外 两 张 照 片上 。 


造 字 工房 悦 ..， 医 维 多 利 业 婚纱 


TU WHEDONMG LURESS 


TT ”10.99 点 
VA 0 


> 
而: 0 于 加 


[105% 


多 利 亚 - 姑 纱 


VILTORA WEDDING DRESS 


共 估 利 再 .提示 


步骤 30 ”绘制 形状 图 形 与 添加 文字 


为 了 使 模特 展示 区 显得 更 为 完整 ， 可 以 继续 在 图 像 上 添加 元 素 。 结 合 “ 直 绪 工 具 ” 和 “ 目 定 形状 工具 ”， 在 3 幅 模 特 展 示 图 
像 中 间 绘 制图 形 ， 然 后 运用 “ 横 排 文字 工具 ”在 图 形 中 间 输 入 文字 。 


[证 i [| a 
FasShion eoE legan 


维多利亚 婚纱 锥 多 利 亚 : 婚 纱 


WTOR WEDOMGE ORES WCTORA ED ORESS 


步骤 31 新 建 “ 细 节 展 示 ” 图 层 组 


经 过 前面 的 制作 ， 完 成 了 商品 上 身 效 果 的 展示 与 设计 ， 接 下 来 为 了 吸引 顾客 ， 还 需要 展示 婚纱 的 卖点 。 新 建 “细节 展 示 ” 
层 组 ， 先 复制 并 修改 “标题 ”图 层 组 中 的 文字 信息 ， 再 打开 素材 文件 02.jpg 并 添加 到 “细节 展示 ”图 层 组 下 。 


[3 


A 


， 树苗 山 亚 
TCTORL -~ 


步骤 32 ”使 用 “相形 选 框 工具 ”绘制 选区 


由 于 这 里 只 需要 将 婚纱 的 细节 和 卖点 展示 出 来 ， 所 以 选择 “和 窍 形 选 框 工具 ”， 人 在 需要 突出 显示 的 区 域 单 击 并 拖 护 鼠标 ， 绘 制 
选区 。 单 击 “ 图 层 ”面板 中 的 “添加 图 层 共 版 ”按钮 ， 隐 藏 选区 外 的 图 像 。 


电车 利生 
FICTORIN. 


步骤 33 ”创建 调整 图 层 调整 颜色 


隐藏 图 像 后 ， 友 现 新 添加 的 婚纱 照片 颜色 与 画面 的 整体 色调 不 协调 ， 需 要 对 它 的 颜色 进行 调整 。 创 建 “ 色 彩 平 衡 3” 调 整 图 
层 ， 加 深 青 色 和 监 色 ， 再 创建 “ 色 阶 1” 调 整 图 层 ， 提 腕 图 像 。 


ET 


色 i 周 :中间 调 
青色 


Wd 导电 PB 
Fm 中 四 周 较 亮 


RGB 


步骤 34 ”绘制 矩形 制作 文字 半 透 明 背 景 


为 了 让 顾客 更 清晰 地 感受 此 球 婚 纱 的 设计 亮 尽 ， 选 用 “ 横 排 文字 工具 ”在 婚纱 图 像 右 侧 单 击 并 输入 文字 ， 输 入 后 使 用 “矩形 
工具 ”在 输入 的 文字 下 方 绘制 一 个 日 色 的 矩形， 然后 适当 降低 图 形 的 不 透明 度 ， 突 出 矩形 上 的 文字 效果 。 


胸部 奢华 精美 蓄 丝 | 胸部 奢华 精美 著 丝 


CHEST LUXURIOUS EXQUISITE LACE CHEST LUXURIOUS EXQUISITE LACE 


婚 妙 胸 都 六 用 独特 的 法国 进口 二 轿 入 觅 者 来 用 独特 的 法 国 进 口 革 
名 面料 ， 卑 工 册 网 设计 ， 精 喜 省 名画 料 ， 卑 工 机 央 证 计 ， 精 考 二 


是 ”有 先 硬 毒 一 片 龙 医者 砚 亚 点 尖 ， 
四 时 期 流 融 质 。 


al 由 性 用 启 : 54% 基 
坑 元 : 100% = 


步骤 35 添加 细节 说 明文 字 


继续 使 用 同样 的 方法 ， 把 另外 两 张 婚纱 照片 添加 到 “细节 展示 ”图 层 组 下 ， 根 据 整 个 页 面 的 风格 ， 对 照片 的 颜色 进行 调整 ， 


统一 其 色调 ， 然 后 结合 “和 窍 形 工具 ”和 “ 横 排 文字 工具 ”在 每 个 细节 图 像 旁边 添加 文案 ， 完 成 商品 细节 的 展示 设计 。 


师 硅 ， 平 互 本 恒 : 让 恒 下 下 区 有 本 


Rh 本 村 时 一 ni ”本 Bh 二 § 看 避 名 = i 
i | 上 人 | 冰 - 重 LE 


步 又 36 ”绘制 选区 并 填 元 凑 色 


为 方便 顾客 选 购 适 合 的 规格 ， 新 建 “ 尺 寸 ”图 层 组 ， 添 加 尺寸 示意 表 ， 使 用 “ 目 形 选 框 工具 ”在 细节 展示 页 面 下 绘制 一 个 算 
形 选 区 ， 然 后 按 住 shift 键 不 放 ， 继 续 绘制 多 个 起 形 选区 。 新 建 图 层 ， 设 置 前 景色 为 R223、QG215、B203， 使 用 “油漆 桶 工 
有 具 ”在 图 像 窗口 中 单 击 ， 为 选区 上 色 ， 完 成 后 按 下 快捷 键 Ctrl+D， 取 消 选 区 。 


步骤 37 ”继续 绘制 选区 填充 颜色 


使 用 “和 矩形 选 框 工具 ”继续 绘制 长 万 形 ， 为 剩余 的 框 涂 上 日 色 ， 完 成 后 取消 选区 。 


步骤 38 ”输入 文字 添加 尺寸 信息 


为 了 让 顾客 更 了 解 衣服 详细 的 尺码 ， 使 用 “ 横 排 文字 工具 ”在 表格 中 输入 商品 尺寸 信息 。 


胸围 腰围 身高 + 鞋 高 
78-82CM 61-65CGM 165-173CM 
81-85CM 65-70CM 165-173CM 
85-89CM 68-72CM 165-173CM 

X| 88-92CM 71-75CM 165-173CM 


注 : 模特 胸围 85CM ”腰围 65CM ”身高 170CM 试 穿 4 号 合身 


步骤 39 ”绘制 矩形 并 输入 温馨 提示 文字 


接 下 来 添加 温馨 提示 小 纸 条 ， 体 现 贴心 服务 。 使 用 “和 窍 形 工具 ”在 尺码 表 下 绘制 一 个 长 方形 ， 双 击 形状 图 层 ， 企 打开 的 “图 
层 样式 ”对 话 框 中 多 选 “ 投 影 ” 复 选 框 ， 调 整 好 各 项 参数 ;选择 “ 横 排 文 字 工 具 ”， 结合“ 字符 ”面板 对 文字 的 属性 进行 设置 ， 


在 小 纸 条 上 单 击 并 输入 所 需要 的 文字 。 


根据 个人 的 穿着 习 惯 和 爱好 ， 

平时 穿 衣 有 所 不 同 ， 此 表格 符 
的 尺码 ， 多 从 艰 池 ， 具体 尺码 亨 
有 特别 要 求 的 亲 还 可 以 定制 哦 | 


码 会 #0 
;分 新 女 
a 客服 ， 


婚纱 尺 
合 大 辣 
请 联 


步骤 40 ”添加 素材 图 片 完成 “尺寸 ”图 层 组 

接 下 来 在 尺寸 资料 旁 添加 素材 图 片 ， 使 尺寸 表 不 再 那么 蛙 调 。 打 开 素 材 文件 08jpg， 把 图 片 拖 动 至 尺寸 表格 的 左 侧 。 使 
用 “椭圆 工具 ”在 素材 图 层 上 方 绘制 椭圆 形 ， 有 覆盖 住 需要 的 部 分 素材 ， 然 后 按 下 快捷 键 Ctrl+Alt+G， 创建 齐 贴 蒙 版 ， 得 到 彬 圆 
形 素材 ， 完 成 “尺寸 ”图 层 组 的 设计 。 


胸围 围 身高 + 鞋 高 
18-82CM Oo5ll 165-173CM 
81-85CM 05—70CGM 165—173CM 
85-89CGM 08- 72CM 165-173CM 
88-92CM 711-—/oCM 165-173CM 


: 模特 胸围 85CM 腰围 65CM 身高 170CM 试 穿 N 号 “合身 


根据 个 人 的 穿着 习惯 和 过 好 ， 婚 纱 尺 码 会 和 
平时 穿 衣 有 所 不 同 ， 此 表格 符合 大 部 分 新 如 
的 尺码 ” 仅 供 参考， 具 体 尺码 请 联系 客服 ， 

有 特别 要 求 的 杂 : 还 可 以 定制 蛾 ! 


步骤 41 给 制 “ 购 买 须 和 ”背景 


新 建 “ 购 买 须知 ”图 层 组 ， 为 了 突显 店家 的 售 前 售后 服务 ， 购 买 须知 用 与 大 背景 不 同 的 颜色 作为 背景 。 首 先 使 用 “矩形 工 
具 ” 在 尺寸 信息 下 绘制 一 个 长 方形 ， 创 建 购买 须知 背景 ， 然 后 使 用 “直线 工具 ”在 背景 的 上 下 方 各 绘制 一 条 虚线 ， 划 分 上 下 内 


人 
oo 


步骤 42 绘制 椭圆 形状 并 添加 文字 信息 


使 用 “椭圆 工具 ”在 适当 位 置 创建 一 个 正 圆 形 ， 再 次 使 用 “椭圆 工具 ”在 正 圆 形 上 创建 一 个 包围 正 圆 的 圆 形 虚 线 ， 将 这 两 个 
形状 复制 多 次 并 授 放 整齐 。 使 用 “ 横 排 文字 工具 ”在 圆 形 背景 上 单 击 并 输入 需要 的 文字 信息 。 


无 理由 


15 天 


1. 我 们 承诺 15 天 无 理由 退换 货 。 
2. 由 于 是 室外 拍 撮 ， 光 线 原因 ， 实 物 与 国 片 可 能 有 轻微 色差 ， 请 您 谨慎 购买 ， 
3. 本 店 商品 统一 发 顺丰 ， 若 有 其 他 问 是 请 咨询 客服 。 


步骤 43 ”使 用 “和 矩形 工具 ”绘制 包 溢 背 景 


包 妆 的 好 坏 体现 了 商品 的 价值 ， 直 接 影 响 顾客 的 购买 决心 ， 所 以 可 添加 包 妆 图 。 新 建 “ 关 于 包 交 ”图 层 组 ， 使 用 “和 窍 形 工 
具 ” 在 “购买 须知 ”下 方 绘制 包 妆 背景 ， 使 用 “ 横 排 文字 工具 ”在 背景 得 形 上 单 击 并 输入 “天 于 包 交 ”字样 。 近 下 快捷 键 
Ctrl+J」 复制 “购买 须 类 ”下 的 虚线 形状 图 层 ， 拖 动 至 “天 于 包 半 ”字样 下 。 


天 于 包 交 


i 


步骤 44 ”使 用 “钢笔 工具 ” 抠 取 包 妆 效果 


打开 素材 文件 09.jpg， 使 用 “钢笔 工具 ” 沿 着 包 沪 的 边缘 建立 轮廓 ， 右 击 并 选择 “建立 选区 ”命令 ， 将 选区 直接 拖 至 “天 于 
包 冯 ”字样 下 。 


步骤 45 ”加 入 更 多 包装 图 像 


由 于 不 同 规格 的 商品 有 不 同 的 包 委 ， 因 此 ， 为 方便 顾客 知道 商品 的 多 种 包 妆 效果 ， 需 要 将 更 多 包 妆 盒 效 果 添 加 到 画面 中 。 通 
过 采用 与 步骤 44 相 同 的 操作 方法 ， 抠 取 包 妆 盒 放 于 画面 中 。 为 了 让 包 妆 盒 呈 现 立 体 的 效果 ， 再 使 用 “图 层 样 式 ” 功 能 为 图 像 添 
加 投影 效果 。 


步骤 46 使 用 “和 矩形 工具 ”绘制 透明 背景 


为 了 突出 “关于 包 妆 ”的 文字 说 明 ， 可 以 在 画面 中 为 文字 说 明 添 加 半 适 明 的 委 饰 背景 。 使 用 “和 埠 形 工具 ”在 画面 右上 方位 置 
绘制 矩形 ， 调 整形 状 图 层 的 “不 透明 度 ” 为 37%。 


步骤 47 ”添加 说 明文 字 


为 包 沪 添加 中 瑞 文 说 明文 字 可 以 体现 商品 的 格调 ， 使 用 “ 横 排 文字 工具 ”在 半 透 明 背 景 上 创建 文字 信息 ， 完 成 “关于 包 


和 半 ” 图 层 组 的 设计 。 


精 救 包 和 表 的 包 衣 昔 写 包 和 六 
发 ， 始 侈 高 映 尖 华章 党 
Lx te packaging bores 
Bae, high-=end 


for you 


经 过 前 面 的 操作 ， 完 成 了 商品 详情 页 中 商品 细节 摘 述 的 设计 ， 接 下 来 进行 橱窗 效果 的 设计 。 创 建 “ 橱 窗 照 ”图 层 组 ， 打 开 素 
材 文件 10jpg， 将 图 像 复 制 到 文件 顶部 位 置 。 
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步骤 49 ”使 用 “ 目 形 工具 ”绘制 图 形 


添加 柚 窗 背景 图 后 ， 接 下 来 需要 确定 柚 窗 的 编排 位 置 ， 选 择 “ 和 矩形 工具 ”， 人 在 选项 杜 中 调整 工具 选项 后 ， 按 住 Shift 键 不 
放 ， 在 画面 的 左上 角 位 置 单 击 并 拖 忠 ， 绘 制 一 个 日 色 描 边 算 形 。 按 下 快捷 键 Ctrlt+J， 复 制 和 矩形， 并 把 复制 的 炬 形 缩小 后 移 人 至 原 日 
色 和 矩形 的 左下 角 位 置 。 


填充 : 攻 因 摘 b: E 0.41 点 


步骤 ?0 ” 竺 印 图 像 


执行 “文件 > 置 入 嵌入 的 智能 对 象 ”菜单 命令 ， 置 入 素材 文件 01jpg， 由 于 这 里 只 需要 展示 主体 婚纱 效果 ， 所 以 执行 “图 层 
> 创建 剪贴 蒙 版 ”菜单 合 令 ， 将 起 形 外 的 图 像 隐藏 。 复 制 婚纱 图 像 ， 移 全 另 一 个 稍 小 的 起 形 上 ， 应 用 同样 的 万 法 创建 剪贴 蒙 版 ， 
把 矩形 外 的 图 像 隐藏 起 来 ， 完 成 橱窗 照 的 制作 。 


步骤 ?1 绘制 黑色 的 矩形 


刀 
建 “分 类 ”图 层 组 ， 选 择 “矩形 工具 ”， 在 商品 摘 述 区 旁边 的 留 日 区 域 绘制 一 个 较 深 一 些 的 和 窍 形 ， 然 后 创建 “标题 ”图 层 组 ， 
用 “ 目 形 工具 ”再 绘制 一 个 黑色 起 形 ， 用 于 输入 分 类 信息 标题 。 


浏 哆 淘宝 不 难 友 现 ， 在 每 个 商品 详情 页 左 侧 都 有 一 个 侧 边 栏 ， 用 于 顾客 选择 商品 的 分 类 ， 下 面 束 进行 分 类 信息 栏 的 设计 。 创 


| 呆 背景 


选择 “ 横 排 文字 工具 ”， 在 绘制 的 黑色 算 形 上 单 击 并 输入 分 类 标题 “宝贝 分 类 ”。 为 了 突出 文字 ,输入 后 在 “字符 ”面板 中 
对 文字 的 字体 和 产 色 进行 调整 。 


细 [ 呈 Regular 


T| 25.62 点 


0 局 


TIITTI 


选择 “ 横 排 文字 工具 ”， 在 绘制 的 黑色 算 形 上 单 击 并 输入 英文 “W"”， 打 开 “字符 ”面板 ， 调 整 文字 属性 ， 继 续 在 输入 的 字 
母 旁 边 输 入 中 文 信息 ， 使 画面 显得 更 有 品味 。 


Amazone BT RR... 


TI 715 一 ] 
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选择 “ 构 排 文字 工具 ” ， 继 续 在 黑色 的 矩形 上 输入 英文 “elcome To”， 将 英文 补充 完整 。 创 建 “ 查 看 所 有 宝贝 ”图 层 组 ， 


选择 “钢笔 工具 ”， 绘制 图 形 ， 用 于 设置 商品 的 详细 分 类 。 


宝贝 分 类 f /宝贝 分 类 
elcome “(oOo VV elcome Yo 


步骤 ?5 ”添加 更 多 分 类 信息 


为 了 让 分 类 信息 呈现 目 然 的 卷 角 感 ， 创 建 “ 折 角 ” 图 层 ， 选 用 “钢笔 工具 ”在 黑色 的 图 形 上 绘制 颜色 较 浅 一 些 的 灰色 图 形 ， 
组 合成 市 折 角 的 图 像 ; 选用 “ 横 排 文字 工具 ”在 图 形 上 输入 文字 信息 。 使 用 相同 的 方法 ， 人 在 侧 边 栏 中 创建 更 多 图 形 并 添加 对 应 的 
分 类 信息 ， 完 成 本 实例 的 制作 。 


<) /宝贝 分 类 
VVelcome ‘lo 


查看 所 有 宝 册 >>。 


按 销量 按 新 品 按 伯 格 按 收藏 
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实例 131 ”儿童 玩具 店 装修 设计 


本 实例 是 为 录 儿 重 玩 具 店 设计 的 详情 页 ， 将 素材 图 片 依次 修复 用 在 详情 页 中 ， 接 者 将 玩具 车 图 像 抠 取 出 来 与 文字 结合 ， 让 玩 
具 车 更 语 动 感 。 同 时 ， 在 色彩 搭配 上 ， 以 日 色 为 底 色 ， 吸 取 车 身上 的 红 蓝 两 色 作 为 对 比 ， 使 画面 更 加 和 谐 。 


素 材 随 书 资源 \ 素 材 \16\11.jpg 一 16.jpg，16-1.jpg，17.psd 一 19.psd， 
0 20.jpg，28.psd 


源 文 件 随 书 资源 \ 源 文件 \16\ 儿 童 玩具 店 装修 设计 .psd 
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本 店 所 有 产品 均 为 100% 实 物 拍摄 ， 


爹 部 商品 均 通 过 国家 禄 认证 ， 厂 家 感 黑 回 
馈 ， 超 高 性 价 比 ，1:32 真 车 等 比 综 放 ， 
亲 们 在 购物 过 程 中 有 任何 问题 可 联系 在 
线 客 闻 捧 ! 


本 店 默 认 快递 为 韵 达 快 递 ， 
有 特 央 要 求 的 亲 可 以 联系 客 珊 更 改 
锯 妃 也 ! 
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(9) 客服 区 


poi 


超过 时 组 次 日 安排 发 货 , 
pore mg 
越 泛 妃 发 货 。 


15 天 无 理由 退换 货 ， 功 能 不 喜欢 尺寸 不 
适 、 楚 换 其 他 玩具 、 不 吉 欢 ， 没 原因 ， 名 是 不 起 要 
， 不 论 什 么 再起 ， 都 接 圣 的 退换 货 耿 ! 


版 式 分 析 


本 实例 用 竖 向 分 布 的 方式 安排 详情 页 中 的 商品 信息 ， 利 用 大 量 图 像 向 顾客 展示 了 玩具 汽车 的 特点 ; 在 对 比 展示 区 ， 运 用 左 、 
右 对 称 的 方式 把 店铺 中 的 商品 与 其 他 同类 商品 作对 比 ， 表 现 该 品牌 玩具 车 质量 很 好 ; 在 商品 售后 区 ， 将 文字 信息 与 商品 通过 对 角 
线 分 布 ， 让 画面 中 密 有 致 。 


步骤 01 使 用 “污点 修复 画笔 ”修复 局 部 图 像 


局 动 Photoshop 程 序 ， 打 开 素 材 文 件 11jJpg， 由 于 经 过 多 次 担 摄 ， 玩 具 车 模型 上 出 现 了 磨损 和 划 痕 ， 为 了 给 顾客 留 下 好 的 
印象 ， 需要 先 修复 这 些 瑕 病 。 按 下 快捷 键 Ctrl+J， 复 制图 层 ， 得 到 “图 层 1” 图 层 ， 运 用 “缩放 工具 ”放大 显示 玩具 汽车 ， 单 击 
工具 箱 中 的 “污点 修复 画笔 工具 ”按钮 贺 ， 在 需要 修补 的 地 方 单 击 鼠 标 。 


辐 有 工 共 上 
s | 不 要 明度 : 100% = 
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步骤 02 ”使 用 “仿制 图 章 工 具 ” 修 复 图 像 


继续 修复 图 像 ， 由 于 硬度 越 遍 仿制 出 来 的 效果 越 明显 ， 而 后 身 需 要 较 明 显 的 仿制 效果 。 所 以 这 里 选择 “仿制 图 章 工 具 ”， 在 
选项 栏 中 设置 较 局 的 硬度 值 ， 然 后 选中 被 仿制 的 地 方 ， 按 住 Alt 键 ， 单 击 鼠 标 并 拖 动 进行 仿制 。 


反 巧 提示 : 修复 图 像 工 具 


仿制 图 章 工具 ”将 更 改 的 地 方 改 成 与 图 中 其 他 部 分 相同 的 样子 ， 多 用 于 大 面积 修复 ;) “污点 修复 画笔 工具 ”类似 于 “涂抹 
工具 ”的 效果 ， 可 将 污点 抹 去 ， 多 用 于 去 掉 斑点 。 


步骤 03 调整 “色彩 平衡 ”控制 颜色 分 布 
为 了 使 车 身 颜 色 更 接近 玩具 车 实物 颜色 ， 打 开 “ 调 整 ” 面板 ， 单 击 “ 色 彩 平衡 ”按钮 圈 ， 创 建 “色彩 平衡 1 ”调整 图 层 ， 分 


别 调整 “中 间 调 ” “高 光 ”“ 阴 影 ” 的 颜色 ，。 


癌 周 : | 阴影 
青色 


洋红 


步骤 04 ”在 选区 中 创建 “曲线 ”调整 亮度 


为 了 突出 玩具 车 主体 ， 可 以 适当 降低 玩具 车 四 周 的 亮度 。 使 用 “和 矩形 选 框 工具 ”， 人 在 选项 栏 中 设置 “ 泣 化 ” 值 为 200 像 素 ， 
在 图 像 中 间 位 置 绘制 选区 ， 执 行 “选择 > 反选 ”菜单 命令 ， 反 选 玩 具 车 四 周 。 新 建 “ 曲 线 1” 调 整 图 层 ， 由 于 这 里 要 降低 边缘 部 
分 图 像 的 亮度 ， 因 此 在 “属性 ”面板 中 单 击 并 向 下 拖 蝶 曲线。 


步骤 05 调整 “ 色 阶 ”与 “党 度 /对 比 度 " 


经 过 上 一 步 操作 ， 虽 然 降低 了 边缘 亮度 ， 但 是 车 子 与 背景 对 比 还 是 不 够 强烈 。 所 以 创建 “ 色 阶 1” 调 整 图 层 ， 加 强 对 比 ， 然 
后 创建 “亮度 /对 比 度 1” 调 整 图 层 , 输入 “亮度 ”为 21，“ 对 比 度 ” 为 12， 提 亮 图 像 ， 加 强 对 比 。 此 时 友 现 图 像 出 现 局 部 曝光 
过 度 的 情况 ， 用 黑色 画笔 在 曝光 过 度 的 区 域 涂抹 ， 还 原 其 亮度 。 


步骤 06 创建 “曲线 ”调整 图 片 色彩 


因为 最 影 光 线 原 因 I 
整 图 层 ， 分 别 选择 


照 卢 的 颜色 与 玩具 车 实体 色彩 有 所 偏差 ， 需 要 将 玩具 车 校 色 ， 调 整 至 实体 的 淡 蓝 色 。 创 建 “ 曲 线 2” 调 
“ 红 ” 和 “ 蔓 ” 通 道 ， 在 “属性 ”面板 中 调整 对 应 的 通道 曲线 ， 修 复 偶 色 的 商品 照片 。 


直 


步骤 07 调整 “亮度 /对 比 度 ” 加 强 明暗 对 比 


为 了 进一步 提 
比 度 进行 调整 。 调 整 
让 玩具 车 色彩 更 统一 ， 


高 对 比 ， 创 建 “ 亮 度 / 对 比 度 2” 和 “亮度 /对 比 度 3” 图 层 ， 


分 别 对 玩具 汽车 的 高 光 部 分 和 阴影 部 分 的 亮度 和 对 
完成 后 按 下 快捷 键 Shift+Ctrl+Alt+E， 匡 印 处 理 后 的 图 层 。 人 至此， 已 完成 玩具 汽车 照片 的 美化 与 修饰 。 为 了 
可 以 使 用 同样 的 方法 对 其 他 车 子 素材 图 像 进 行 润色 和 修饰 操作 


[= 隔 本 
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号 层 : 


对 比 度 ; 


情 用 旧版 


步骤 08 使 用 “ 息 形 工具 ”制作 广告 模块 背 


新 建 空 日 文件 ， 用 于 制作 整体 的 委 修 效果 ， 根 据 网 店 妆 修 太 寸 要 求 ， 在 
x5400 像 素 ， 分 辨 : 


新 建 ” 对 话 框 中 设置 新 建文 件 的 尺寸 为 750 像 素 
状 率 为 72ppi， 设 置 后 单 击 “ 确 定 ”按钮 ， 新 建文 件 。 在 新 建 的 文件 中 创建 “广告 模块 ”图 层 组 ， 首 先 做 广告 模 
块 的 背景 。 设 置 前 景色 为 R217、G219、B216 


， 新 建 “ 图 层 1” 图 层 ， 选 择 “起 形 工具 ”， 在 画面 适当 的 位 置 绘制 图 形 。 


步骤 09 使 用 “创建 齐 贴 图 层 ” 编 辑 素材 图 片 


接 下 来 做 一 个 充满 昔 趣 的 广告 模块 。 首 先 添 加 卡通 素材 图 片 ， 打 开 素 材 文 件 12.jpg， 将 图 像 抑 入 “广告 模块 ”图 层 组 下 ， 放 
置 于 广告 模块 背景 图 层 上 。 要 使 素材 图 片 在 宣传 页 育 景 乙 内 ， 残 需要 隐藏 素材 图 片 多 余 的 部 分 ， 在 素材 图 层 上 单 击 鼠 标 右键 ， 选 
择 “ 创 建 齐 贴 蒙 版 ”， 将 素材 图 片 包含 在 背景 框 中 。 


步骤 10 ”使 用 “ 潭 变 工具 ”制作 渐变 效果 


为 了 让 和 置 入 的 图 像 与 灰色 背景 呈现 自然 的 过 渡 效 果 ， 选 择 “ 图 层 2” 图 层 ， 添加 图 层 蒙 版 ， 选 择 “ 渐 变 工具 ”， 在 选项 栏 中 
设置 " 黑 ,， 日 渐变 ”， 在 需要 隐藏 图 像 的 部 分 从 左 同 右 拖 蝶 鼠标 ， 释 放 鼠 标 后 即 得 到 渐变 效果 。 


步骤 11 创建 “ 黑 日 ”调整 图 层 编辑 素材 图 片 


为 了 使 广告 模块 更 店 设 计 感 ， 可 以 做 出 彩色 与 黑 捍 渐变 的 效果 。 按 住 Ctrl 键 不 放 ， 单 击 “ 图 层 1” 图 层 ， 载 入 选区 ， 单 
击 “ 调 整 ” 面 板 中 的 “ 黑 日 ”按钮 创建 “ 黑 日 1” 调 整 图 层 ， 在 “属性 ”面板 的 “ 预 设 ” 下 拉 列 表 框 中 选择 “ 较 亮 。， 将 彩色 
图 片 转换 成 黑 日 图 片 。 


步骤 12 ”继续 编辑 素材 图 片 


为 了 得 到 目 然 的 彩色 与 黑 日 的 渐变 效果 ， 选 择 “ 男 笔 工 具 ”， 设置 前 景色 为 日 色 ， 在 画面 需要 变 成 彩色 的 部 分 涂抹 。 


步骤 13 ”从 素材 图 片 中 抠 取 图 像 


为 了 突出 广告 主题 ， 可 以 添加 产品 展示 效果 图 。 打 开 素 材 文 件 13.jpg 修 图 后 的 文件 ， 拼 合 图 像 后 使 用 “钢笔 工具 ” 沿 玩 具 车 
绘制 路 径 ， 按 下 快捷 键 Ctrl+Enter， 将 路 径 转换 为 选区 ， 选 中 车 子 图 像 ， 选 择 “ 移 动工 具 ”， 把 选区 中 的 玩具 车 拖 人 至 广告 模块 画 
面 右 侧 的 位 置 。 


单 击 “ 横 排 文字 工具 ”按钮 ， 在 玩具 车 下 方 输入 文字 ， 为 了 让 画面 中 的 文字 与 背景 图 像 显得 更 为 协调 ， 打 开 “ 字 符 ” 面 板 ， 
调整 文字 字体 、 颜 色 等 选项 。 
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精致 小 汽车 
下 高 性 价 比 理 年 好 伙伴 


步骤 15 绘制 标题 的 形状 图 形 


制作 好 汽车 宣传 广告 后 ， 接 下 来 是 商品 详细 参数 的 设置 。 新 建 “ 产 品 参 数 ” 图 层 组 ， 然 后 在 该 图 层 组 下 新 建 “ 标 题 ” 图 层 
组 ， 用 于 标题 栏 的 设计 。 将 前 景色 设置 为 R190、G51、B0， 选 择 “ 矩 形 工 具 ”， 在 选项 栏 中 单 击 “ 填 充 ” 右 侧 的 下 拉 按 钮 ， 在 
展开 的 下 拉 列 表 中 单 击 “ 渐 变 ” 按 钮 ， 设 置 渐变 颜色 ， 在 广告 图 像 下 单 击 并 拖 擅 鼠标 ， 绘 制 矩 形 ， 得 到 “ 目 形 1” 图 层 。 


精致 小 汽车 


+ 


步骤 16 为 所 有 板块 添加 标题 


选择 “钢笔 工具 ”， 在 息 形 元 上 方 单 击 并 拖 折 鼠 标 ， 绘 制 与 息 形 颜色 相近 的 图 形 ， 绘 制 后 栅 格 化 图 形 ， 得 到 “图 层 4” 图 
层 。 为 了 体现 板块 的 主要 内 容 ， 选 择 “ 横 排 文 字 工 具 ”， 在 绘制 的 图 形 上 输入 文字 “产品 参数 ”。 


利 市 。 而 一 。 重庆 
者 市 而 和 而 放 


淹 齐 ， 神 种 ” 曾 鹿 
和 让， 二 证 市 


1 
和 


步骤 17 复制 多 个 标题 


由 于 同一 网 店 中 每 个 板块 的 标题 样式 大 体 相同 ， 所 以 可 以 将 制作 的 “标题 ”图 层 组 复制 。 按 下 快捷 键 Ctrl+J， 复 制 标题 栏 ， 
然后 根据 要 表现 的 商品 特点 ， 应 用 “ 横 排 文字 工具 ”更 改 标题 栏 文 字 。 


步骤 18 加 入 素材 图 像 


复制 标题 栏 以 后 ， 接 下 来 在 “产品 参数 ”图 层 组 中 添加 商品 并 设置 详细 参数 ， 为 了 让 顾客 更 加 直观 地 了 解 玩具 汽车 的 尺寸 ， 
打开 素材 文件 11.jpg 修 图 后 的 文件 ， 拼 合 图 像 后 选用 “钢笔 工具 ” 抠 出 玩具 车 ， 然 后 把 抠 出 的 汽车 图 像 复 制 到 “产品 参数 ”标题 
栏 的 左下 方 。 


步骤 19 ”绘制 线条 并 添加 尺寸 数值 


为 了 使 顾客 更 加 直观 地 了 解 商 品 参 数 与 特性 ， 可 以 结合 图 形 和 文字 表现 车 子 的 具体 尺寸 。 选 择 “ 直 线 工 具 ”， 在 车 的 周围 分 
别 绘制 7 个 形状 图 形 ， 得 到 标尺 ， 然 后 在 绘制 的 直线 旁边 输入 具体 的 数值 信息 。 


步骤 20 ”添加 商品 参数 说 明文 字 


标示 了 汽车 的 长 、 宽 值 以 后 ， 接 下 来 为 了 让 顾客 更 清楚 汽车 的 材质 、 类 型 等 ， 选 择 “ 横 排 文 字 工 具 ”， 在 汽车 右 侧 和 下 方 的 
留 日 处 输入 具体 的 商品 参数 。 为 了 突出 文字 的 主 次 关系 ， 输 入 后 在 需要 突出 表现 的 文字 下 万 绘制 蓝 色 的 矩形 。 


产品 材质 : 合金 塑料 电子 元 件 
:车模 
也 : 纽扣 电池 【AG13/LR44】 
: 2 岁 以 上 
;儿童 玩具 
家 居 摊 设 送礼 馈赠 


产品 简介 高 仿真 设计 ， 靓 丽 的 色彩 ， 精 致 的 细节 处 理 ， 酷 炫 的 造型 ， 让 
”中 站 全 ”孩子 们 爱不释手 ， 在 玩 页 中 进一步 提高 对 色彩 和 模型 的 认 知 。 


步骤 21 为 “产品 卖 上 号 ”板块 添加 素材 图 像 


新 建 “ 产 品 卖点 ”图 层 组 。 打 开 束 材 文 件 1?.jpg、16:jpg 修 图 后 的 文件 ， 拼 合 图 像 后 选择 “钢笔 工具 ” 抠 出 图 像 中 的 玩具 小 
汽车 ， 然 后 把 抠 出 的 图 像 复制 到 “产品 卖点 ”图 层 组 下 ， 得 到 “图 层 6” 和 “图 层 7” 图 层 ， 复 制 “ 图 层 ?” 图 层 ， 得 到 “图 层 ? 
拷贝 ”图 层 ， 将 此 图 层 中 的 汽车 移 至 “图 层 7” 图 层 上 。 


产品 简介 高 仿 真 设 计 ， 起 而 的 色彩 ， 精 臻 的 细节 处 理 ， 本 的 造型 ,让 


[| 
产品 挤 齐 再 丁 天生 和 守 ， 本 汪 辣 下 证， 国 站 图 民 5 持 四 
孩子 们 爱不释手 ， 在 玩 要 中 进一步 提高 对 色彩 和 模型 的 认 知 ， 和 下 本 和 | 


步骤 22 使 用 “上 自 定 形状 工具 ”绘制 前 


为 了 表现 动感 的 玩具 车 效果 ， 可 以 在 汽车 旁边 添加 涂饰 图 案 。 设 置 前 景色 为 R190、G51、B0， 选 择 “ 目 定形 状 工具 ”， 
在 “形状 ” 拾 色 器 中 早 击 “箭头 3” 形状， 在 汽车 图 像 右 下 角 绘 制 一 个 箭头 符号 ， 按 下 快捷 键 Ctrl+J， 复 制 箭头 ,执行 “编辑 > 
变换 > 水 平 翻转 ”命令 ， 翻转 区 头 并 将 其 移 至 汽车 左上 角 位 置 。 


步骤 23 ”添加 说 明文 字 


产品 卖点 是 为 了 激 友 顾客 的 购买 欲 星 ， 所 以 为 了 让 顾客 了 解 这 款 玩具 汽车 的 优点 ， 选 择 “ 横 排 文字 工具 ”， 在 汽车 旁边 输入 
卖点 信息 。 输 入 后 根据 版 面 情况 调整 文字 的 大 小 和 颜色 等 ， 得 到 铬 沙 有 致 的 画面 效果 。 


高 度 仿真 


襄 信 站 内 剖 物 虽 加 上 策 下 到 站 
一 此 和 让 疙 第 ， 扯 格子 1 有 二 缀 手 


赫 牢 喷涂 
车 亏本 证 蝴 肖 工 至 ， 禾 致 妆 完 ， 
浊 色 灼 富 不 挤 交 ， 特 六 耐 唐 


后 轮 带 强 动 回访 


入 车 盐 坚 随地 困 向 后 上 ， 糙 下 手语 车 子 刁 建 前 下 
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步骤 24 创建 “产品 展示 ”图 层 组 


新 建 “ 产 品 展示 ”图 层 组 ， 将 处 理 好 的 商品 图 像 添加 到 该 图 层 组 下 ， 由 于 这 款 玩具 车 有 蓝 色 和 白色 两 种 ， 所 以 为 了 更 好 地 区 
分 商品 ， 运 用 “ 横 排 文字 工具 ”在 汽车 图 像 上 输入 相应 的 颜色 信息 。 


步骤 25 创建 “产品 对 比 ”图 层 组 


新 建 “产品 对 比 ”图 层 组 ， 用 本 店铺 的 商品 与 其 他 店铺 作对 比 ， 突 显 本 店铺 商品 的 优点 。 使 用 “ 目 形 工具 ”在 “产品 对 
比 ”标题 下 创建 6 个 矩形 形状 并 将 它们 排列 好 ， 作 为 对 比 图 片 的 背景 。 打 开 处 理 前 与 处 理 后 的 商品 照片 ， 分 别 复制 到 不 同 的 矩形 
上 万 。 


步骤 26 ”添加 商品 对 比 文字 信息 


由 于 此 处 只 需要 突出 局 部 效果 ， 因 此 创建 剪贴 蒙 版 ， 把 多 余 的 区 域 隐藏 起 来 ， 得 到 对 比 展示 效果 。 选 择 “ 横 排 广 字 工 具 ”， 
在 汽车 图 像 旁 边 输入 本 店 商品 与 其 他 店铺 中 同类 商品 的 对 比 信息 ， 为 了 让 商品 指示 信息 更 明确 ， 输 入 后 选用 “ 自 定 形状 工具 ”在 
文字 工 边 绘制 红色 的 箭头 图 案 。 


步骤 27 添加 “关于 产品 ”文字 信息 


新 建 “ 关 于 产品 ”图 层 组 ， 使 用 “ 横 排 文字 工具 ”用 较 规 范 的 字体 添加 与 商品 有 关 的 说 明文 字 。 为 了 让 商品 介绍 信息 显得 更 
为 生动 ， 打 开 素 材 文件 17.psd ~ 19.psd， 分 别 拖 至 说 明文 字 旁 。 


关于 产品 
本 店 所 有 产品 均 为 100% 实 物 拍摄 ， 
全 部 商品 均 通过 国家 30 认 证 ， 厂 家 感恩 回 
馈 ， 超 高 性 价 比 。1: 32 真 车 等 比 缩放 ， 
亲 们 在 购物 过 程 中 有 任何 问题 可 联系 在 
线 客服 蛾 ! 


本 店 默 认 快 递 为 韵 达 快递 ， 
有 特别 要 求 的 节 可 以 联系 客服 更 改 
快递 哦 ! 


每 天 18 点 之 前 的 订单 正常 当天 发 货 ， 
超过 时 限 次 日 安排 发 货 ， 如 遇 特 殊 情 
况 工作 人 员 会 及 时 联系 您 更 换 商 品 
或 延迟 发 货 。 


15 天 无 理由 退换 货 ， 功 能 不 喜欢 、 尺 寸 不 
适 、 想 换 其 他 玩具 、 不 喜欢 、 没 原因 ， 就 是 不 想 要 
， 不 论 什 么 理由 ， 都 接受 的 退换 货 陶 ! 


新 建 “客服 ”图 层 组 ， 使 用 “矩形 工具 ”在 合适 位 置 绘制 矩形 ， 得 到 “图 层 21" 
"渐变 亚 加 ” 复 选 框 ， 选 择 线性 渐变 ， 


在 打开 的 “图 层 样式 ”对 话 框 中 勾 选 


步骤 29 ”绘制 矩形 制作 客服 旺旺 区 


旺旺 客服 制作 需要 根据 店家 提供 的 旺旺 客服 数量 决定 绘制 多 少 个 矩形 框 ， 使 用 工具 箱 中 的 “ 圆 角 和 矩形 工具 ”创建 矩形 形状 ， 
绘制 完成 后 按 下 快捷 键 Ctrl+J， 复 制 多 个 矩形 形状 ， 排 列 整齐 。 


在 画面 合适 位 置 绘制 ， 


本 店 所 有 产品 均 为 100% 6 实物 拍摄 
全 部 商品 均 通 过 国家 3C 认 证 ， 厂 家 感恩 回 
馈 ， 超 高 性 价 比 。1:32 真 车 等 比 缩放 ， 
亲 们 在 购物 过 程 中 有 任何 问题 可 联系 在 国 
线 客 服 噬 ! 


本 店 默 认 快 递 为 竟 达 快速， 
有 特别 要 求 的 杀 可 以 联系 客服 更 改 
快递 哦 ! 


每 天 18 点 之 前 的 订单 正常 当天 发 货 ， 
超过 时 限 次 日 安排 发 货 ， 如 这 特殊 情 GaN 六 
况 工作 人 员 会 及 时 联系 您 更 换 商品 殿 
或 延迟 发 货 。 


CC 

15 天 无 理由 退换 货 ， 功 能 不 喜欢 、 尺 寸 不 
适 、 想 换 其 他 玩具 ，、 不 喜欢 、 没 原因 ， 就 是 不 想 要 …'… 
， 不 论 什么 理由 ， 都 接受 的 退换 货 隘 ! 


图 层 ,， 制 作客 服 区 背景 。 双 击 背 景 图 层 ， 
并 做 出 中 间 亮 两 边 瞳 的 效果 。 


步骤 30 ”使 用 “渐变 工具 ”制作 投影 效果 


打开 素材 文件 28.psd， 为 了 使 素材 中 的 旺旺 头像 更 加 立体 企 真 ， 可 为 它 添加 投影 。 按 下 快捷 键 Shift+Ctrl+Alt+E， 项 ED 可 
见 图 层 ， 按 下 快捷 键 Ctrl+T， 目 由 变换 图 形 ， 单 击 鼠 标 右键 ， 选 择 “垂直 翻转 ”并 将 其 移动 到 画面 合适 位 置 ; 单 击 “ 添 加 图 层 营 
版 ”按钮 国 ， 为 翻转 的 图 层 添加 蒙 版 ， 使 用 “渐变 工具 ”， 在 选项 栏 中 设置 黑色 到 透明 的 线性 渐变 ， 设 置 完成 后 在 画面 拉 出 渐 
变 ， 隐 藏 部 分 图 像 。 


步骤 31 复制 多 个 旺旺 头像 


在 每 个 客服 旺旺 区 都 放置 旺旺 头像 ， 让 男 面 更 加 统一 。 按 下 快捷 键 Ctrl+J， 复 制 多 个 旺旺 头像 ， 按 下 Ctrlt+T， 自 由 变换 图 
形 ， 缩 小 旺旺 头像 ， 将 头像 分 别 放置 在 各 个 矩形 上 。 


步骤 32 ”添加 文字 信息 


要 突显 旺旺 客服 的 作用 ,使 用 “ 横 排 文字 工具 ”在 算 形 的 旺旺 头像 芳 添 加 “和 我 联系 ”字样 。 


步骤 33 ”输入 客服 说 明文 字 


添加 说 明文 字 能 够 体现 客服 的 专业 和 认真 ， 使 用 “ 横 排 文 字 工 具 ” 在 客服 背景 上 单 击 并 输入 较 活泼 的 文字 ， 为 客服 添加 说 明 


步骤 34 ”为 文字 添加 图 层 样式 


双击 文字 图 层 ， 在 打开 的 “图 层 样式 ” 对 语 框 中 勾 选 “外 友 光 ” 复 选 框 ， 为 文字 添加 友 光 效果 ， 并 对 相应 的 选项 进行 设置 。 


步 又 35 创建 “色相 /饱和 度 ” 降 低 饱 和 度 


因为 要 与 背景 相 匹配 ， 所 以 将 客服 区 做 出 与 广告 模块 相同 的 效果 。 选 择 “客服 ”图 层 组 ， 按 下 快捷 键 Ctrl+E， 合 并 所 选 组 ， 
得 到 “客服 ”图 层 。 创 建 “ 色 彩 /饱和 度 1” 调 整 图 层 ,， 调整 “饱和 度 ” 值 为 -100， 得 到 黑 日 效果 。 


re | 


步骤 36 用 “画笔 工具 ”编辑 蒙 版 


选择 “画笔 工具 ”， 景色 为 晶 色 ， 单 击 “ 画 笔 预 设 ” 选 取 器 中 的 “和 柔 边 圆 ”画笔 ， 在 画面 需要 变 回 彩色 的 部 分 涂抹 。 


专业 寄 服 了 若林 为 仿 最 务 即刻 咨询 ! 
ore | Try a | re EC 


步骤 37 用 “ 男 笔 工具 ”编辑 蒙 版 


使 用 “画笔 工具 ”涂抹 画面 客服 区 中 间 部 分 ， 将 涂抹 区 域 的 图 像 颜色 还 原 为 彩色 ， 得 到 彩色 与 黑 日 渐变 的 效果 。 


专业 宥 服 陋 | 问 为 您 眼 务 ! 即 赣 资 询 ! 


技巧 提示 : 调整 画笔 笔触 大 小 


用 “画笔 工具 编辑 图 像 时 ， 可 以 按 下 键盘 中 的 [或 ] 键 ， 将 画笔 放大 或 缩小 ; 也 可 以 通过 拖 昌 “画笔 预 设 ”选取 器 中 的 “大 
小 ” 滑 块 调整 画笔 大 小 。 


步骤 38 使 用 “ 置 入 ”命令 置 入 图 像 


为 了 让 详情 页 更 完整 ， 接 下 来 制作 商品 橱窗 展示 效果 。 打 开 素 材 文 件 20jpg， 将 打开 的 图 像 复 制 到 新 建 的 店铺 妆 修 设计 图 
上 ， 得 到 “图 层 23” 图 层 组 ， 创 建 “ 橱 窗 照 ”图 层 ， 将 “图 层 23” 移 至 图 层 组 中 。 


人 现代 出 租车 诗 金 汽车 模型 儿童 玩具 伊兰特 索纳塔 金属 回力 声 


从 巾 ¥ 63:80 400 253 
累计 评 记 。 变 胃 后 功 

= ¥29.90 EE 

俩 淘 主 币 可 括 0.29 元 


北京 至 四 川 瞩 才 金牛 区 ~ 。 快递 免 运 盟 ”和 才 芝 于 庄 24d. 肌 内 发 拓 


至 色 14.5om 虹 色 ji,5cm 出 民 1 中 .Sm 


总 量 1 “| 十 件 ( 际 存 1296 伴 ) 


等 时 ,号 看 壮 玉 抽 上 
0 于 嫩 珊 


等 52 全 本 
衬 手 续 吉 


| 
含 手 绎 费 


步骤 39 用 “ 算 形 工具 ”绘制 图 形 


选择 “ 算 形 工具 ”， 人 在 选项 栏 中 设置 工具 选项 ， 在 画面 左 侧 的 留 日 位置 单 击 并 拖 忠 鼠标 ， 绘 制 矩 形 ， 用 于 确定 要 湛 加 的 照片 
的 具体 位 置 。 


二 京 现时 重 丰 合金 物 车 模型 儿童 玩具 伊 三 特 索 纳 二 金属 回力 声 


光 
轴 计 评论 。 交易 成 功 
sh ¥ 29.90 EE 


面 淘 主 市 可笑 0,297 


国医。 北京 至 四 可 生生 区 ~。 快递 免 运 蜗 ~ 。 雪夫 承重 24 时 内 发 
二 虹 色 1 .erm 菌 色 , | 本 本 


带电 1 “十 性 (库存 12 旺 健 ) 


¥9.96x3M 5.2x0M 四 3.51x3 瑚 
0 元 手 娃 珊 总 手 蛙 需 总 手续 更 


立即 购买 


步骤 40 ”创建 剪贴 家 版 


执行 “文件 > 置 入 嵌入 的 智能 对 象 ” 菜 单 命令 ， 将 素材 文件 16-1.jpg 置 入 网 店 装修 设计 图 中 ， 命 名 为 “图 层 24”， 由 于 这 里 


只 企 上 一 步 所 绘制 的 起 形 中 显示 商品 效果 ， 因 此 执行 “图 层 > 创建 勇 贴 蒙 版 ”菜单 售 令 ， 创 建 剪 贴花 版 ， 将 息 形 外 的 图 像 隐藏 。 
现代 出 租车 合金 汽车 模型 儿童 玩具 伊兰特 索纳塔 金属 回力 声 


人 i 局 痢 本 = 
“ah ¥ 29.90 FEEEH 
侠 淘 主 币 可 抵 0.29 元 


本 运 北京 圣 四 川 威志 金牛 区 “性 递 免 运 奥赛 家 攻 诺 24 小 肝 内 发 下 
冰 芭 逢 此 _ 
“| 色 14.56m 果 色 14.56m 骨 色 14,5em 


灶 旱 1 | 生 ” 件 ( 原 存 1286 件 ) 


a a ¥ 9.96x3 烘 | ¥ 5.2x6 类 


竺 3.51x9 捧 | 
0 元 手 早 需 于 时 轴 


| 六 | 图 层 24 图 = ri 六 图 层 24 
器 矩形 了 拭 开 5 


立即 购买 


| 国 导 3 = | se» 


步骤 41 复制 图 像 创 建 剪贴 蒙 版 


| 


同时 选中 “和 窍 形 6” 和 “图 层 24” 图 层 ， 将 这 两 个 图 层 拖 遇 至 “创建 新 图 层 ” 按 钮 ， 得 到 “图 层 6 拷贝 ”和 “图 层 24 找 
贝 ”图 层 ， 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 枉 ， 缩 小 图 像 ， 然 后 将 复制 的 “和 窍 形 6 拷贝 ”的 摘 边 颜色 更 改 为 红色 。 


YB 橱窗 昭 
-TE ge | 
* 本 | 图 层 24 拷贝 


f | 站 图 层 24 
口 矩形 6 


步骤 42 用 “起 形 工具 ”绘制 图 形 

经 过 前 面 的 操作 ， 完 成 橱窗 照 的 设计 与 制作 ， 接 下 来 是 侧 边栏 的 设计 。 由 于 侧 边 栏 包括 的 分 类 信息 较 多 ， 为 了 便于 管理 ， 移 
创建 “ 侧 边栏 ”图 层 组 ， 选 择 “ 和 矩 形 工 具 ”， 在 选项 栏 中 设置 工具 选项 ， 然 后 绘制 一 个 浅 灰 色 和 矩 形 ， 确 定 侧 边栏 背景 色调 ; 再 创 
建 “ 店 内 搜索 ”图 层 组 ,使 用 “ 算 形 工具 ”在 灰色 矩形 顶部 绘制 一 个 日 色 的 算 形 。 


k 和 [下 内 挡 宗 
‘oy ltr E67 


咏 村 他 边 医 


步骤 43 用 “ 圆 角 息 形 工具 ”绘制 矩形 


选择 “ 圆 角 息 形 工具 ”， 在 选项 栏 中 调整 工具 选项 ， 为 图 形 设置 搞 边 选项 ， 然 后 将 “半径 ”设置 为 3 像素 ， 从 而 使 绘制 的 答 
形 边 绿 更 圆滑 ， 设 置 好 后 在 日 色 和 矩形 上 方 单 击 并 拖 忠 姐 标 ， 绘 制 一 个 圆 角 算 形 。 为 了 得 到 更 丰富 的 画面 效果 ， 结 合 “ 算 形 工 
具 ” 和 “ 圆 角 算 形 工具 ”， 人 在 日 色 的 背景 上 绘制 更 多 的 图 形 。 


填充 : 及 要 擅 b: 医 0.3 点 


步骤 44 使用“ 目 定 形状 工具 ”绘制 搜索 图 标 


由 于 这 里 制作 的 是 商品 搜索 栏 ， 所 以 为 了 让 绘制 的 图 形 的 目的 更 明确 ， 还 可 以 添加 搜索 图 标 。 选 择 “ 目 定 形状 工具 ， 单 
击 “ 形 状 ” 石 侧 的 下 拉 按 钮 ， 在 展开 的 “形状 ” 拾 色 器 中 单 击 “搜索 ”形状 ， 将 鼠标 移 全 红色 的 所 形 上 ， 单 击 并 拖 押 鼠 标 ， 绘 制 
日 色 的 搜索 图 标 ， 然 后 在 下 万 的 搜索 栏 左 侧 单 击 并 拖 忠 女 标 ， 绘 制 灰色 的 搜索 图 标 。 


步骤 45 ”设置 并 应 用 样式 


在 网 店 装修 中 ， 会 绘制 一 个 交互 的 操作 按钮 ， 为 了 让 按钮 表现 出 立体 感 ， 选 中 最 下 方 的 矩形 图 层 ， 执 行 “图 层 > 图 层 样 式 > 
摘 边 ”菜单 命令 ,打开 “图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 多 选 “ 摘 边 ” 和 “渐变 鲁 加 ” 复 选 框 ， 设 置 对 应 的 样式 选项 ， 为 文字 添 
加 样式 效果 。 


新 绽 委 加 
新 亦 
混合 模式 :| 正常 = 
看 和 明度 (P): = |100 |% 
Fr sc 
样 水 :| 维 E :| MY 与 图 

角度 (N): | | [55 ”| 度 |[ 二 对 齐 


招 英 
| 
kd = [|] 
位 置 : | 内 部 :| 
混合 模式 : | 正常 r 
不 鼻 明 度 (0): 一 
| 要 FE 


5): \ 100 


| 入 


ne: 六 


步骤 46 ”添加 搜索 文字 


选择 “ 模 排 文字 工具 ”， 在 搜索 区 域 输入 搜索 天 键 字 。 创 建 “ 新 品 推荐 ”图 层 组 ， 选 择 “起 形 工 具 ”， 在 图 层 组 上 绘制 一 个 
黑色 的 算 形 。 


店内 搜索 


步骤 47 ”设置 并 应 用 样式 


执行 “图 层 > 图 层 样式 > 斜 面 和 浮雕” 菜单 售 令 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 勾 选 “斜面 和 浮雕 ” “纹理 ”“ 谭 


变 车 加 ” 复 选 框 ， 然 后 在 右 侧 设 置 对 应 的 样式 选项 ， 设 置 完成 后 单 击 “确定 ”按钮 ， 为 图 形 应 用 样式 ， 得 到 与 画面 风格 更 吻合 的 
标题 效果 


大 小 [zh 至 
软化 (F): ; 


用 度 (N): 


高 度 : 30 度 


汽 共 等 高 线 : 


局 Dt 模式 : | 小 
不 垣 明度 (0): “ |63 


消除 户 占 (L) 


步骤 48 绘制 椭圆 添加 样式 


|% 
阴影 模式 : | 正片 一 底 3 
不 透明 度 (C): 二 2 二 |23 | 的 


六 理 
图 素 
| . 国 | 贴 亲 原点 2) 
下 sae E+ 
rn 
回 攻 | 


1 


新 缀 
混合 模式 : | 正常 :| | | 信 庆 
不要 明度 (Pj): |100 | 吕 
二 Fa 
样式 : | 线性 + | [ 与 图 民 N 


朋 度 (Nk | * ||90 | 度 ES 


hh (5S): 


选择 “椭圆 工具 ”， 人 在 标题 栏 左 侧 单 击 并 拖 蝶 鼠标 ， 绘 制 一 个 日 色 小 贺 ， 执 行 “图 层 > 图 层 样 式 > 淘 变 鲁 加 ”菜单 命令 ， 打 


开 “ 图 层 样式 ”对 话 框 。 为 了 让 绘制 的 小 圆 与 红色 的 
变 效果 。 


F142==) 
月 只 


区 别 更 明显 ， 在 “图 层 样 式 ”对 话 框 中 将 图 形 的 渐变 颜色 更 改 为 黄色 淘 


新 变 到 加 
渐 训 
混合 模式 : [ 正常 :] 口 信 & 
不 和 明度 (P): ， Dy [100 |% 
#: 四] 名 网 


样式 : | 线性 :| [ 与 图 层 


角度 (Nj: | 上 ||90 | 度 | 重 轩 对 齐 


(5S): Ps 100 | 三 


步骤 49 ”绘制 图 形 添加 文字 


为 了 让 标题 信息 捐 示 更 明确 ， 选 择 “ 目 定形 状 工具 ”， 单 击 “ 形 状 ” 右 侧 的 下 搁 按钮 ， 在 展开 的 “形状 ” 拾 色 器 中 单 击 “ 季 
头 2” 形 状 ， 在 黄色 圆 形 上 单 击 并 拖 遇 ， 绘 制 红色 的 稍 头 图 形 ， 再 复制 箭头 ， 将 其 颜色 更 改 为 日 色 后 ， 移 全 标题 栏 的 右 侧 ， 最 后 
用 “ 模 排 文字 工具 ”人 在 标题 栏 输入 文字 。 


步骤 20 ”绘制 图 层 创 建 勇 贴 家 做 


绘制 标题 栏 后 ， 接 下 来 融 是 新 品 推荐 。 选 择 “ 和 起 形 工具 ”， 在 标题 栏 中 单 击 并 拖 擅 鼠标 ， 绘 制 一 个 日 色 的 矩形， 并 为 号 形 添 
加 摘 边 效果 ， 然 后 执行 “文件 > 置 入 骨 入 的 智能 对 象 ” 茉 单 俞 令 ， 把 处 理 好 的 汽车 图 像 置 入 到 起 形 上 方 ， 得 到 “图 层 25” 图 层 。 


由 于 这 里 只 需要 在 起 形 内 部 显示 商品 效果 ， 所 以 执行 “图 层 > 创建 筋 贴 蒙 版 ”菜单 俞 令 ， 创 建 剪 赔 家 版 ， 将 超出 息 形 的 玩具 汽车 
隐藏 。 


新 品 推荐 ”更 多 ， 


步骤 ?1 添加 更 多 的 商品 图 像 


由 于 店铺 中 的 新 品 并 不 止 一 个 ， 所 以 将 矩形 复制 ， 然 后 置 入 另 一 个 玩具 汽车 图 像 ， 设 置 后 创建 “宝贝 分 类 ”图 层 组 ， 进 行商 
品 分 类 的 设计 。 选 择 “ 和 埠 形 工具 ”， 在 选项 栏 中 设置 填充 颜色 为 渐变 ， 为 了 让 颜色 更 统一 ， 这 里 将 渐变 斋 色 设置 为 红色 ， 然 后 
在 “新 品 推荐 ”区 域 蛙 击 并 拖 灸 鼠标， 绘制 渐变 色 算 形 。 


圳 投 威 台 使 小 汽车 楼 型 玩 皮 套 雪 
华 一 金属 车 可 开车 门 


18 :ee 


一 口 昼 改革 将: 5 


步骤 52 绘制 图 形 添加 “投影 ”样式 


选择 “钢笔 工具 ”， 设 置 绘制 模式 为 “形状 ”， 然 后 在 选项 栏 中 设置 与 上 一 步 所 绘制 的 矩形 颜色 相近 的 渐变 色 ， 在 起 形 的 左 
上 角 连 续 单 击 ， 绘 制 三 角形 。 为 了 让 绘制 的 图 形 表现 出 更 立体 的 投影 效果 ， 绘 制 后 双击 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 设 
置 “投影 ”样式 。 


赣 合 模式 ; 正片 晋 底 
不 透明 度 (0) se |75 a 


角度 (A): | [120 ”| 度 门 使 用 全 局 光 (G) 


i 7 可 Er J 


NZ 


和 
DQ 
-90 


编 失 : 100 = 驳 有 与 图 层 对 齐 


步骤 53 ”更 多 图 形 与 文字 的 设计 


续 使 用 图 形 绘制 工具 在 画面 中 绘制 更 多 的 图 形 ， 然 后 使 用 “ 横 排 文字 工具 ”在 绘制 的 图 形 上 输入 详细 的 分 类 信息 ， 完 成 本 
实例 的 制作 。 


按 销 量 按 新 品 按 价格 按 收 藏 -一 -一 
| 卫生 宰 
本 分 类 一 件 也 包 邮 ee 


| 


wa 共计 /可 二 出自 
本 分 类 ; 莫 四 件 包 邮 二 
a 
1 六 页 /大 本 中 
Po 


脑 芭 高 罕 所 需 莫 


hh 吴 生 /出 章 
+r ET 
Se 


| 


: tH 


5 工 阱 车 /二 忆 


5 秆 往生 如 


惯性 /回力 / 赵 态 /上 发 条 = 一 


+ 枚 入 如 生机 


轿车 /跑车 /越野 车 下 


警车 /消防 /救护 
军车 / 战 车 /坦克 
公交 /巴士 /出 租 


WW 


YY 


bd 


> 工程 车 /应 卡 
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= Eo 本 店 所 有 产品 均 为 100 站 实物 拍摄 ， 


实例 132 “化妆品 类 店铺 装修 设计 


本 实例 是 为 化 妆 品 店铺 设计 的 首页 ， 在 设计 时 使 用 线条 对 画面 进行 不 规则 的 分 阳 和 修饰 ， 运 用 蓝 绿色 与 日 色 营造 出 清爽 、 舒 
。 同 时 ， 为 了 突出 商品 纯 天 然 、 无 添加 的 特色 ， 在 画面 中 加 入 水 花 、 花 米 素 材 加 以 修饰 ， 使 得 整个 版 面 显得 更 生动 、 更 


时 
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随 书 资源 \ 素 材 \16\21.jpg 一 25.jpg，26.psd 一 28.psd，29.jpg 一 36. 
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”<S、 量 Fe gf 源 文件 。 随 书 资源 \ 源 文件 \16\ 化 妆 品 类 店铺 装修 设计 .psd 


中 店 招 @ 导航 


@) 欢迎 模块 


由 分 类 导航 
(3) 客服 区 


热 销 单 品 


| 八方 美白 祛斑 乳液 
a es 要 这 198RMB 288RWMB 
上 攻 效 淡化 良 纹 得 印 


ee 四 
oN 


八方 多 元 修 护 眼 需 
的 卖 价 : 208RMB 265RN8 


Ee 
y _ 让 
ee 本 © 执 \ 江 商 口 口 
各 无 处 了 | 5 下 廊 


笋 配套 餐 


新 八方 美白 祛斑 套装 
执 相 500RMB 680RMB 


促销 广告 


9 mie mde (ee 
TA | 您 提供 售后 无 忧 保 涵 烛 至 现 不 一 样 的 8 务 | 39 和 和 指认 
售后 服务 


版 式 分 析 


观察 此 网 店 首 页 的 布局 ， 欢 迎 模块 中 将 商品 与 模特 按 左 右 对 称 的 方式 安排 ， 利 用 规则 的 矩形 让 画面 中 的 商品 形 综 更 加 生动 ; 
在 商品 热卖 区 域 ， 将 广告 商品 通过 左 文 厂 图 或 石 文 左 图 的 万 式 进行 排列 ， 目 然 地 构建 出 S 形 的 曲线 ， 能 够 让 顾客 的 视线 随 着 商品 
或 文字 的 走向 进行 目 由 移动 ， 另 外 这 样 的 布局 方式 还 能 表达 出 一 种 轻松 目 由 的 感觉 ， 并 营造 出 视 况 上 的 动态 感 。 


步骤 01 使 用 “矩形 工具 ”制作 微 标 背景 


启动 Photoshop 程 序 ， 新 建 空白 文件 ， 尺 十 设置 为 750 像 素 x5400 像 素 ， 分辨 率 为 72ppi。 完 成 后 新 建 “ 店 招 ”图 层 组 ， 由 
于 商品 是 纯 植物 的 化 妆 品 ， 所 以 将 整个 页 面 的 委 修 风格 确定 为 目 然 清 爽 风格， 选择“ 和 埠 形 工具 ”， 设 置 前 景色 为 晶 色 ， 人 在 画面 适 
当 的 位 置 绘制 图 形 ， 生 成 “ 息 形 1” 图 层 ， 双 击 该 形状 图 层 ， 在 打开 的 “图 层 样式 ” 对 话 框 中 勾 选 “投影 ”和 “ 摘 边 ” 复 选 框 ， 
并 企 对 话 框 中 设置 选项 ， 为 图 形 添 加 样式 效果 。 


指 边 
大 小 (5): 一 一 | | 蚤 混合 模式 : | 正片 县 底 | 
位 置 : | 外 部 下 表明 度 (0)， = [20 |% 

混合 模式 : | 正片 有 底 SN 

加 | 


; 度 (Ay | 
不 透明 度 (0): < ml 角度 A > 


要 Fh 中 高 (D): 本 
填充 类 型 :| 颜色 : 


se: 大 小 (sh 5 


120 | 度 [Vi 使 用 全 局 光 


步骤 02 ”使 用 “ 横 排 文字 工具 ”添加 徽标 


为 了 加 深 品 牌 印 象 ， 可 在 店 招 位 置 添加 店铺 徽标 。 选 择 “ 横 排 文字 工具 ”， 在 日 色 的 矩形 中 间 位 置 单 击 并 输入 店铺 名 称 ， 输 
入 后 双击 文字 图 层 ， 在 打开 的 “图 层 样 式 ” 对 话 框 中 你 选 “渐变 蔷 加 ” 复 选 框 ， 并 设置 好 各 项 参数 。 设 置 前 景色 为 R223、 
G104、B21, 使 用 “ 目 定 形状 工具 ”在 Logo 中 绘制 一 个 加 号 符号 。 


新 变 权 加 
新 变 
混合 模式 : | 正常 :| 口 信 冯 

不 委 明 度 (P): 


样式 : | 线性 


角度 (Nj: | 上 [50 | 度 


缩 这 (5): 上 5 a |100 | 台 


I SRL11] 


| 设置 为 默认 值 | | 复位 为 默认 值 


步骤 03 ”添加 了 商品 广告 文字 


为 了 让 店 招 区 域 显得 更 为 丰富 ， 选 择 “ 横 排 文字 工具 ”， 继 续 在 日 色 的 息 形 上 万 输入 更 多 的 文字 。 


DrrSkin 


步骤 04 使 用 “和 矩形 工具 ”制作 导航 背景 


完成 店 招 设计 后 ， 接 下 来 残 是 导航 条 的 设计 。 新 建 “ 导 航 ” 图 层 组 ， 因 为 定义 为 目 然 清爽 的 风格 ， 所 以 将 前 景色 设置 为 
R2、G164、B167， 在 店 招 下 绘制 中 形 图 形 ， 制 作 导 航 条 背景 ， 得 到 “和 窍 形 2” 图 层 ， 使 用 “ 横 排 文字 工具 ”在 导航 条 育 景 上 添 


加 导 舰 文字， 导航 条 制作 完成 。 


下 内 折 有 富 人 由 


步骤 05 ”添加 图 层 蒙 版 隐藏 图 像 


新 建 “ 欢 迎 异 块 ”图 层 组 ， 打 开 京 材 文件 21jpg， 使 用 “ 目 形 选 框 工具 ” 框 选 需要 的 素材 部 分 ， 然 后 将 选区 内 的 图 像 拖 入 欢 


迎 模 块 中 。 为 了 让 拖 入 的 模特 图 像 与 背景 融合 到 一 起 ， 使 用 “橡皮 擦 工具 ” 


分 图 像 ， 并 将 图 层 的 “不 透明 度 ” 设 置 为 70%， 使 画面 显得 更 加 唯美 。 


:i 
OD kp 次 J 模块 


© 导航 


步骤 06 ”使 用 相同 的 方法 添加 水 化 图 像 


， 选 择 “ 和 柔 边 圆 ”画笔 在 模特 图 像 边 绿 涂 抹 ， 隐 藏 部 


为 了 表现 商品 洁面 的 功效 ， 打 开 素 材 文件 22jpg， 按 照 步 骤 05 中 的 方法 ， 在 模特 图 像 的 左 侧 添 加 水 花 图 像 ， 得 到 “图 层 


2” 图 层 。 同 样 ， 为 了 得 到 唯美 的 画面 效果 ， 将 图 层 的 “不 透明 度 ” 设 置 为 65%。 


步骤 07 ”绘制 图 形 添加 商品 效果 


完成 水 化 图 像 的 设置 后 ， 接 下 来 残 需要 同 欢 迎 模块 中 添加 商品 。 在 添加 商品 前 ， 选 择 “起 形 工 具 ”， 在 欢迎 模块 中 绘制 不 同 
大 小 的 窍 形 ， 用 于 确定 商品 的 摆 放 位 置 。 执 行 “ 文 件 > 置 入 众 入 的 智能 对 象 ”菜单 售 令 ， 将 素材 文件 23jpg ~ 25jpg 置 入 到 画面 
中 。 为 了 将 多 余 图 像 隐藏 ， 再 分 别 选 择 置 入 的 图 像 图 层 并 创建 剪贴 蒙 版 效果 。 


步骤 08 创建 “ 色 阶 ”调整 图 层 调 整 明暗 


观察 置 入 的 商品 图 像 ， 友 现 化 妆 品 因 拍 摄 时 曝光 不 足 ， 画 面 整体 颜色 偶 蜡 。 因 此 载 入 商品 选区 ， 创 建 “ 色 阶 1” 调 整 图 层 ， 
调整 图 像 的 党 度 ， 使 图 像 变 得 明亮 起 来 。 


步骤 09 ”加 入 更 多 素材 图 片 
使 用 同样 的 方法 ， 在 欢迎 模块 中 添加 更 多 的 素材 图 像 。 添 加 后 选择 “ 横 排 文字 工具 ”， 在 画面 中 输入 商品 促销 文字 ， 为 了 让 
输入 的 文字 更 有 层次 感 ， 可 以 结合 “字符 ”面板 对 输入 的 文字 进行 大 小 、 颜 色 的 调整 。 


THE 上 FFICLALY 
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步骤 10 ”使 用 “ 横 排 文字 工具 ”输入 分 类 信息 


为 了 让 顾客 更 加 方便 地 选 购 商品 ， 可 加 入 分 类 导 般 模块。 新建“ 分 类 导航 ”图 层 组 ， 并 在 “分 类 导 舰 ”下 新 建 “ 字 1” 图 层 
组 。 使 用 “ 横 排 文字 工具 ”在 欢迎 模块 右 下 角 单 击 并 输入 分 类 文字 ， 选 择 “直线 工具 ”， 在 主体 文字 和 其 他 文字 中 间 单 击 并 同 下 
拖 蝶 鼠标 ， 绘 制 王 直 的 线条 效果 。 


rr 
入 方 美 自 放 班 洁 肌 术 至 | 斑 洁 肤 


八方 美白 洁面 摩 斯 


步骤 11 继续 使 用 同样 的 方法 添加 分 类 信息 


由 于 商品 的 分 类 并 不 止 一 种 ， 所 以 在 “分 类 导航 ”图 层 组 下 创建 “ 字 2” 和 “ 字 3” 图 层 组 ， 结 合 “ 横 排 文 字 工 具 ” 和 “ 直 
线 工具 ”在 画面 中 完成 更 多 分 类 信息 的 设置 。 


消除 盖 丫 肌肤 
去 将 印 系 列 
美白 社 班 系列 
去 黄 英 白 
细腻 肌肤 


步骤 12 ”使 用 “ 横 排 文字 工具 ”添加 客服 区 文字 


新 建 “ 客 服 ” 图 层 组 ， 使 用 文字 工具 在 分 类 模块 下 单 击 并 输入 客服 区 文字 信息 ， 完 成 后 在 “字符 ”面板 中 调整 好 文字 的 各 项 
参数 ， 使 其 和 简洁 清爽 的 风格 统一 。 


步骤 13 ”使 用 “直线 工具 ”绘制 线条 


为 了 使 客服 看 起 来 美观 有 创 晶 ， 选 择 “直线 工具 ”， 在 显示 的 选项 栏 中 设置 选项 后 ， 在 需要 添加 旺旺 客服 图 标的 位 置 单 击 并 
拖 蝶 鼠标 ， 绘 制 倾 斜 的 线条 。 打 开 素 材 文 件 28.psd， 将 旺旺 头像 分 别 放置 到 直线 上 ， 按 下 快捷 键 Ctrl+T， 打 开 目 由 变换 编辑 
框 ， 将 旺旺 图 像 调 整 至 合适 的 大 小 。 


步骤 14 ”复制 线条 和 旺旺 图 像 


选中 线条 和 旺旺 图 像 所 在 图 层 ， 连 续 按 下 快捷 键 Ctrl+」J， 复 制 更 多 线条 和 旺旺 图 像 ， 然 后 将 复制 的 图 像 分 别 移 全 客服 姓名 旁 
边 ， 得 到 更 动感 的 客服 区 效果 。 


/小 E， 站 
ftermarket 


步骤 15 使 用 “ 粉 形 工 具 ” 绘 制 广告 背景 


新 建 “促销 广告 ”图 层 组 ， 设 置 前 景色 为 R211、G221、B199， 选 择 “ 矩 形 工具 ”， 在 旺旺 客服 下 绘制 矩形 作为 促销 广告 


jd: 


一 动 - 后 室 服 水 @: 
/ 1 ha 


步骤 16 置 入 模特 素材 图 像 


执行 “文件 > 置 入 嵌入 的 智能 对 象 ”菜单 命令 ， 把 素材 文件 29.jpg 置 入 到 画面 中 。 为 了 让 置 入 的 模特 图 像 表现 出 自然 的 过 渡 
效果 ， 选 择 “ 画 笔 工 具 ”， 设 置 前 景色 为 黑色 ， 在 模特 图 像 边 绿 涂 抹 ， 隐 藏 部 分 图 像 。 


步骤 17 ”隐藏 图 像 添加 商品 介绍 信息 


经 过 上 一 步 操 作 ， 虽 然 将 一 部 分 图 像 隐藏 起 来 了 ， 但 是 还 有 一 尝 超 出 息 形 的 图 像 仆 显示 出 来 。 因 此 执行 “图 层 > 创 建 剪 贴 家 
版 ” 茉 单 合 令 ， 创 建 筋 贴 花 版 ， 隐 藏 图 像 。 选 择 “ 和 炬 形 工具 ”， 在 人 物 图 像 下 方 绘制 多 个 同等 大 小 的 矩形 ， 然 后 选用 “ 酉 排 文字 
工具 ”在 矩形 上 方 输 入 商品 介绍 信息 ， 输 入 后 单 击 “ 段 沙 ” 面板 中 的 “居中 对 齐 文本 ”按钮 ， 将 文字 设置 为 居中 对 齐 效果 ， 使 画 
面 显 得 更 加 紧凑 。 


步骤 18 创建 促销 广告 2 


为 了 使 页 面 上 、 下 两 部 分 形成 对 称 的 画面 感 ， 创 建 “ 促 销 广 告 2” 图 层 组 ， 使 用 相同 的 方法 ， 在 妆 修 页 面 奈 部 也 制作 一 个 商 
品 促销 广告 。 


步骤 19 使 用 “钢笔 工具 ”绘制 不 规则 分 隅 线 


新 建 “ 热 卖 商品 ”图 层 组 ， 用 于 添加 店铺 中 热卖 的 商品 。 为 了 营造 轻松 的 画面 感 ， 在 热卖 商品 区 以 S 形 曲线 的 布局 安排 内 
容 ， 先 创建 “ 线 ” 图 层 组 ， 选 择 “ 钢 笔 工 具 ”， 在 画面 中 绘制 一 条 新 变形 状 的 线条 ， 然 后 将 绘制 的 线条 复制 ， 结 合 “ 直 接 选 择 工 
具 ” 对 线条 的 外 形 轮廓 进行 设置 ， 得 到 错位 排列 的 线条 。 


步骤 20 置 入 水 伦 素 材 图 像 


经 过 上 一 步 操作 ， 对 热卖 商品 区 进行 了 简单 的 划分 ， 下 面 残 是 细节 的 处 理 。 为 了 迎合 商品 清洁 、 严 肤 的 功效 ， 创 建 “水 
化 ”图 层 组 ， 执 行 “ 文 件 > 置 入 组 入 的 智能 对 象 ”菜单 售 令 ， 将 素材 文件 30.jpg 置 入 到 画面 中 ， 根 据 画 面 需要 调整 水 化 的 大 小 和 


位 置 。 


| 


有 = 


> ”水花 
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步骤 21 使 用 图 层 蒙 版 拼合 图 像 


由 于 这 里 只 需要 保留 部 分 水 花 效果 ， 因 此 选中 置 入 的 “30” 图 层 ， 单 击 “ 图 层 ” 面 板 中 的 “添加 图 层 蒙 版 ”按钮 ， 添 加 图 
层 共 版 ， 使 用 黑色 画笔 在 水 化 图 像 边 缘 涂 抹 ， 将 多 余 的 水 化 隐藏 起 来 。 


步骤 22 设置 “自然 饱和 度 ” 调 整 水 花 颜色 


观察 图 像 友 现 添加 到 画面 中 的 水 伦 颜 色 不 够 鲜艳 ， 为 了 增强 画面 的 视 党 冲击 力 ， 需 要 提高 颜色 鲜艳 度 。 按 住 Ctrl 键 不 放 , 单 
击 “30” 图 层 蒙 版 ， 将 蒙 版 区 域 载 入 选区 。 创 建 “自然 饱和 度 1” 调 整 图 层 ， 打 开 “ 属 性 ”面板 ， 由 于 这 里 需要 提高 颜色 鲜艳 
度 ， 所 以 把 “ 目 然 饱和 度 ” 和 “饱和 度 ” 疹 块 向 右 拖 外 。 


六 四 自然 哆 和 度 


自然 忠和 度 : 


ta 各 度 : 


步骤 23 使 用 “椭圆 工具 ”绘制 热 销 标 签 


接 下 来 需要 制作 商品 分 类 标题 ， 选 择 “ 椭 圆 工 具 ” 在 水 花 图 像 左 侧 的 线条 上 单 击 并 拖 蝶 鼠标 ， 绘 制 一 个 小 加 。 为 了 使 画面 风 
格 更 统一 ， 把 绘制 的 小 圆 颜 色 设 置 为 R220、G241、B242， 右 击 “ 椭 加 1” 形 状 图 层 ， 在 弹出 的 快捷 菜单 中 选择 “ 栅 格 化 图 
层 ” 命 令 ， 栅 格 化 形状 。 选 择 “ 橡 皮 擦 工具 ”， 把 多 余 的 圆 形 删除 ， 得 到 热 销 标签 背景 。 


步骤 24 使用“ 横 排 文字 工具 ”添加 文字 


选择 “ 构 排 文字 工具 ”， 在 标 尝 上 单 击 并 输入 文字 “ 热 销 单 品 ”， 输 入 后 打开 “字符 ”面板 ， 为 了 方便 顾客 阅读 ， 这 里 将 标 
题 文字 的 字体 设置 为 工整 的 楷体 。 


档 体 Regular 


TT 56 占 


0 
Ni 


10096 


选择 “ 横 排 文字 工具 ”， 在 标签 上 单 击 并 输入 数字 “1”， 输 入 后 打开 “字符 ”面板 ， 为 了 突出 商品 序号 ， 将 数字 的 字体 设 
置 为 方正 显 仁 简体 ， 并 把 文字 的 字号 设置 为 较 大 的 90 点 。 


方正 显 仁 简体 .在 J“ 
z : 热 销 日 品 


90 点 


100% 100% 
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步骤 26 ”加 入 商品 图 像 


设置 好 商品 的 序号 后 ， 下 面 残 可 以 向 画面 添加 热卖 商品 了 。 执 行 “ 文 件 > 置 入 仍 入 的 智能 对 象 ” 荣 音 命令， 把 素材 文件 
31jpg 置 入 到 妆 修 文件 中 ， 使 用 “钢笔 工具 ” 沿 商品 图 像 绘 制 路 径 ， 按 下 快捷 键 Ctrl+Enter， 将 路 径 转换 为 选区 ， 单 击 “ 添 加 图 
层 蒙 版 ”按钮 加 ， 隐 藏 多 余 的 背景 ， 把 商品 抠 取 出 来 。 


步骤 27 设置 “亮度 /对 比 度 " 


由 于 拍摄 时 曝光 不 足 ， 照 片 中 的 商品 看 起 来 偏 瞳 ， 而 且 感 党 很 脏 ， 需 要 提 亮 。 按 住 Ctrl 键 不 放 ， 单 击 “31” 图 层 缩 哆 图 ， 载 


Dy 


入 商品 选区 。 新 建 “ 亮 度 / 对 比 度 1” 调 整 图 层 ， 在 打开 的 “属性 ”面板 中 向 右 拖 忠 “亮度 ” 疹 块 ， 快 速 提 亮 图 像 。 
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步骤 28 设置 “ 色 阶 ” 


经 过 上 一 步 操 作 ， 虽 然 商 品 变 赏 了， 但 是 感觉 亮度 还 是 不 够 。 再 次 载 入 商品 选区 ， 新 建 “ 色 阶 3” 调 整 图 层 ， 骨 一 次 对 商品 


ub 区 色 [ 阶 


jm : 目 定 


了 TTT mm 
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步骤 29 ”重印 图 层 湛 加 投影 
亮 


为 了 让 添加 到 画面 中 的 商品 表现 出 立体 的 视 完 效果 ， 接 下 来 还 要 为 商品 设置 投影 。 按 住 Ctrl 键 不 放 ， 连 续 单 击 “31" 
度 / 对 比 度 1” “ 色 阶 3” 图 层 ， 同 时 选中 多 个 图 层 ， 按 下 快捷 键 Ctrl+Alt+E， 盖 印 选 中 图 层 ， 得 到 “ 色 阶 3 (合并 ) ”图 层 。 执 
行 “编辑 > 变换 > 垂直 翻转 ”菜单 偏 令 ， 垂 直 翻 转 图 像 ， 将 其 移 全 原 商品 图 像 下 方 ， 添 加 图 层 蒙 版 ， 使 用 黑色 画笔 涂抹 ， 隐 藏 部 


分 倒影 ， 得 到 远 真 的 投影 效果 。 


步骤 30 ”添加 更 多 商品 图 像 
复制 “ 色 阶 3 (合并 ) ”图 层 ， 结 合 图 层 蒙 版 编辑 图 层 ， 得 到 更 多 的 商品 效果 。 为 了 让 顾客 了 解 商 品 的 主要 功效 ,需要 添加 
”绘制 一 个 灰色 起 形 。 


模特 图 像 展示 使 用 商品 后 的 效果 ， 先 使 用 “起 形 工具 ” 绽 


步骤 31 设置 图 层 样 式 


绘制 图 形 后 ,执行 “图 层 > 图 层 样式 > 光泽 ”菜单 命令 ， 打 开 “ 图 层 样式 ”对 活 框 ， 在 对 话 框 中 勾 选 “光泽 ”和 “投影 ” 复 
选 框 ， 然 后 在 对 话 框 右 侧 分 别 对 这 两 个 样式 选项 进行 设置 ， 设 置 后 单 击 “ 确 定 ”按钮 。 


光泽 把 影 
结构 结构 

混合 模式 : | 正片 亚 底 J 加 漫 合 模 式 : | 正片 县 底 | 四 和 
不 盐 明 度 (0): 本 : 不 生 明 度 (0): 2 |35 |% 


包 谨 (NW: (+) [so ]) 角度 (A): | \ | [120 ”| 度 [J 使 用 全 局 光 (G) 


2 (0D): 二 | i 8B 高 (0D): 三 3 任 素 


大 小 (5S): 5 | 80 扩展 (R) /一 一 | op 
守 启 持 : | Yi 消 际 锯 占 (L) z 
所 上 0 大 | (5S) 到 | 像素 


步骤 32 ”应 用 样式 效果 


返回 图 像 窗 口 ， 此 时 可 看 到 添加 样式 后 的 矩形 表现 出 更 强 的 光泽 感 。 


步骤 33 ”创建 弄 贴 蒙 版 拼合 图 像 


使 用 “ 窍 形 工具 ”在 上 灰色 起 形 中 间 再 绘制 一 个 稍 小 一 些 的 窟 形 ， 执 行 “ 文 件 > 置 入 识 入 的 智能 对 象 ” 荣 单 命令 ， 把 素材 文件 
32:jpg 置 入 到 和 修文 件 中 ， 执 行 “ 图 层 > 创建 勇 贴花 版 ”菜单 售 令 ， 创 建 剪 贴 蒙 版 ， 隐 藏 多 余 的 图 像 。 


步骤 34 用 “曲线 ”调整 图 像 亮 度 


观察 置 入 的 模特 图 像 ， 发 现 模 特 的 皮肤 还 不 够 日 叔 。 按 住 Ctrl 键 不 放 ， 单 击 图 层 缩 览 图 ， 将 其 载 入 至 选区 。 新 建 “ 曲 线 
”调整 图 层 ， 打开 “属性 ”面板 ， 在 面板 中 分 别 选择 RGB 和 和 “ 族 ” ， 由 于 这 里 要 让 反 肤 变 得 更 日 ， 所 以 分 别 单 击 并 向 上 拖 


拒 曲 线 。 


步骤 35 ”添加 更 多 的 热卖 商品 


经 过 前 面 的 操作 ， 完 成 了 商品 及 商品 功能 展示 的 设计 。 为 了 让 顾客 更 清楚 商品 名 称 、 价 格 、 使 用 效果 等 ， 结 合 图 形 绘制 工具 
和 “ 横 排 文字 工具 ”在 商品 右 侧 绘制 图 形 ， 并 输入 对 应 的 商品 说 明 信 息 ， 最 后 使 用 相同 的 方法 ， 在 画面 中 添加 更 多 热卖 商品 。 


新 驮 开 蝴 站 症 尖 面相 
CTP 


淡化 细 纹 黑 眼 圈 ， 提 拉 本 ” 


后妃 各 和 
肾 致 去 细 级 可 | 世 尖 


新 六 方 次 向 直 天 套 闻 
[ 册 击 从 :B00RME ae | 


厨 剧 & 浊 向 

型 是 | 志明 EE 上 
A 加 1 让 

a 剖 、 肚 册 天 丽 吓 弟 粳 琶 梧 


Te . 旧 湖 各自 堆 刘 


步骤 36 用 “ 窍 形 工 具 ” 绘 制图 形 


为 了 提高 顾客 的 信任 度 ， 可 以 在 页 面 最 底部 添加 售后 服务 信息 。 新 建 “售后 服务 ”图 层 组 ， 为 了 将 商品 展示 与 服务 保证 分 隅 
开 ， 使 用 “起 形 工具 ”绘制 息 形 形状 ， 放 置 在 广告 图 下 面 ， 并 且 使 用 文字 工具 在 起 形 形状 上 单 击 并 输入 店铺 徽标 。 


步骤 37 ”绘制 小 加 和 线条 图 案 


， 然 后 按 下 快捷 键 Ctrl+J， 复 制 多 个 圆 形 图 案 
择 “ 直 线 工 具 ”， 在 圆圈 之 间 绘 制 线条 


， 得 到 并 排 的 画面 效果 ， 再 选 


Dr skin 


步骤 38 用 “ 横 排 文字 工具 ”输入 服务 信息 


选择 “ 横 排 文字 工具 ”， 在 画面 中 输入 售后 服务 信息 。 输 入 文字 后 ， 为 了 表现 服务 信息 的 主 次 关系 ,结合 “字符 ”面板 对 输 


入 文字 的 字号 、 颜 色 加 以 修饰 ， 完 成 本 实例 的 设计 。 


Dr skin 


7 ne 七 天 无 理由 退货 特色 服务 体验 帮助 中 心 
WE 局 / 品质 护航 ， 购 物 无 顶 为 您 提供 售后 无 忧 保 障 你 的 风物 指南 


